[플러터] 12. 간단한 앱 만들기 (1/2)

가볍게 연습용으로 간단한 앱을 만들어 보자.

앱 개발 시 이미 잘 만들어진 오픈 소스 프로젝트를 불러와서 개발하면 편리하게 진행 할 수 있다.

수많은 플러그인이 플러터 오픈 소스 저장소 pub.dev 에 공개되어 있으니 불러와 사용하면 된다.

플러그인 사용법을 알아보자.

플러터 프로젝트를 생성하면 자동으로 생성되는 pubspec.yaml 파일에 원하는 플러그인을 추가하고 pub get 버튼을 클릭하여 프로젝트에서 사용할 수 있다.

자주 사용하는 플러그인 중 하나인 WebView 플러그인 추가하는 예제.

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter: 3.0.4

 

자! 이제 간단한 앱을 만들어 보자.

Column 위젯과 Row 위젯만을 사용하여 연습용으로 만든다.

위젯은 내부에서 값이 변경되었을 때 위젯 자체에서 다시 렌더링을 실행 시킬 수 있는 StatefulWidget 과 위젯 내부에서 값이 변경되어도 위젯 자체적으로 다시 렌더링 할 수 없는 StatelessWidget 으로 나뉜다.

이번에는 StatelessWidget 을 직접 구현할 예정이다.

기본 구조는 다음과 같다.

lib/main.dart 파일

import 'package:flutter/material.dart';

void main() {
  runApp(
  	// SplashScreen 위젯을 렌더링.
    SplashScreen(),
  );
}

// StatelessWidget 을 상속 받아 구현한다.
class SplashScreen extends StatelessWidget {

	// build 함수를 필수로 구현해야 한다.
    // 화면에 그리고 싶은 위젯을 입력.
  @override
  Widget build(BuildContext context) {
  }
}

 

 

화면 가운데 글자를 출력하는 앱을 만들어보자.

import 'package:flutter/material.dart';

void main() {
  runApp(
    SplashScreen(),
  );
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  
  	// 항상 최상단에 입력되는 위젯
    return MaterialApp(
    
    	// 항상 두번째로 입력되는 위젯
      home: Scaffold(
      
      	// 중앙 정렬 위젯
        body: Center(
        
        	// Text 를 화면에 보여주는 위젯
          child: Text('Splash Screen'),
        ),
      ),
    );
  }
}

 

위 파일을 실행하면 아래와 같은 화면을 가진 앱이 된다.

 

다음에는 배경색을 추가하여 화면을 꾸며보자!!