[flutter]프로젝트 구조

 

• .idea : 개발 도구에 필요한 설정
• android : 안드로이드 네이티브 코드를 작성하는 부분
• ios : iOS 네이티브 코드를 작성하는 부분
• lib : 다트 코드를 작성하는 부분
• test : 테스트 코드를 작성하는 부분

 

 

import 'package:flutter/material.dart';

 

플러터에서는 화면을 그리는 모든 디자인 요소를 위젯이라고 합니다. package:flutter/material.dart 패키지에는 머티리얼 디자인 위젯들이 포함되어 있습니다. 머티리얼 디자인을 기본으로 하는 앱은 이 패키지를 임포트하여 머티리얼 디자인 위젯을 사용할 수 있습니다.

 

void main() => runApp(MyApp());

 

main() 함수는 앱의 시작점입니다. 여기서는 runApp() 함수에 MyApp() 인스턴스를 전달합니다.

 

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

 

StatelessWidget 클래스는 상태가 없는 위젯을 정의하는데 사용됩니다. runApp() 함수에 전달된 MyApp 클래스는 다음과 같이 정의되어 있습니다. 상태를 가지지 않는다는 것은 한 번 그려진 후 다시 그리지 않는 경우 입니다. 이러한 클래스는 프로퍼티로 변수를 가지지 않습니다. (상수는 가질 수 있습니다.)

 

StatelessWidget 클래스는 build() 메서드를 가지고 있습니다. build() 메서드는 위젯을 생성 할 때 호출되는데, 실제로 화면에 그릴 위젯을 작성해 반환합니다.

 

build() 메서드가 반환하는 MaterialApp클래스는 title, theme, home 세 가지 이름이 있는 인수를 설정합니다. 이 프로퍼티들을 설정하여 위젯의 속성을 표현합니다. home에 작성하는 위젯이 실제 이 앱이 표시하는 위젯이 됩니다.

 

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

 

상태가 있는 위젯을 정의할 때는 StatefulWidget 클래스를 사용합니다. StatefulWidget 클래스는 StatefulWidget을 상속받은 MyHomePage 클래스와 State<MyHomePage> 클래스를 상속받은 _MyHomePageState 클래스로 구성됩니다.

 

MyHomePage 클래스의 생성자는 key와 title 프로퍼티를 옵션으로 받아서 super 키워드로 부모 클래스의 생성자에 key를 전달합니다.

 

MyHomePage 클래스에는 상속받은 createState() 메서드를 재정의하여 _MyHomePageState 클래스의 인스턴스를 반환합니다. 이 메서드는 StatefulWidget이 생성될 때 한 번만 실행되는 메서드 입니다.

 

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

State 클래스를 상속받은 클래스를 상태 클래스라고 부릅니다. 상태 클래스는 변경 가능한 상태를 프로퍼티 변수로 표현합니다. 나중에 이 변수의 값을 변경하면서 화면을 다시 그리게 됩니다.

 

_MyHomePageState 클래스의 상태에 따라 화면에 그려질 코드를 여기에 작성합니다. 모양새는 StatelessWidget 클래스와 똑같습니다. build() 메서드를 가지고 있고 여기에 화면에 그려질 부분을 정의합니다.

 

State 클래스에서는 주로 상태를 저장할 변수들과 그 변수를 조작할 메서드를 작성합니다. 카운터 앱의 State 클래스는 다음과 같이 정의되어 있습니다.

 

정수형 _counter는 0으로 초기화 되어있고, _incrementCounter() 메서드는 setState() 메서드를 실행합니다. 여기서 setState() 메서드가 중요합니다. 이 메서드의 인수로 입력 인수가 없고, 반환값이 없는 익명 함수를 작성했습니다. 익명 함수의 내용은 _counter를 1만큼 증가시키는 겁니다.

 

setState() 메서드는 전달된 익명 함수를 실행한 후 화면을 다시 그리게 하는 역할을 합니다. 화면은 build() 메서드가 실행되면서 그려진다고 배웠습니다. 즉, setState() 메서드는 build() 메서드가 다시 실행되게 하는 역할을 합니다. setState() 메서드는 State클래스가 제공하는 메서드 입니다.

 

MyHomePage 클래스는 StatefulWidget의 서브클래스이며 상태를 가질 수 있습니다. 그리고 그 상태는 State 클래스의 서브클래스로 정의합니다. 여기서 변경 가능한 상태는 _counter 변수입니다. 이 값이 변경될 때마다 화면을 다시 그리면 동적인 화면을 가진 앱이 되는 겁니다.