Flutter - 앱 구조 확인하기

구조 확인하기

 

플러터는 모든 코드가 lib 폴더에서 관리됩니다.

 

 

 

코드 살펴보기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

 

import는 flutter의 material UI를 의미합니다.

ios 스타일의 위젯을 사용하고자 하면 import 'package:flutter/cupertino.dart';를 입력하면 됩니다.

 

플러터의 메인 함수는 단순히 runApp 함수를 호출하고 있습니다. =>는 람다식으로 코드를 줄인 것입니다.

 

runApp 함수에는 보여줄 화면을 넣습니다. 여기서는 stateless를 넣었지만 stateful도 넣을 수 있습니다.

 

MyApp 위젯은 단순히 화면에 표시되는 UI 컴포넌트라고 보면 됩니다.

 

나머지 코드는 화면에 기본적으로 보이는 디자인 코드입니다.

 

 

 

MyHomePage

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

 

MyHomePage 위젯은 stateful입니다.

stateless 위젯인 MyApp과 다른 점은 createState() 함수를 통해 상태를 담당하는 클래스를 지정할 수 있다는 것입니다.

즉, 조건에 따라 내용을 갱신할 수 있습니다.

 

 

 

_MyHomePageState

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

MyHomePage 위젯의 상태를 담당하는 _MyHomePageState 클래스입니다.

 

_MyHomePageState나 _incrementCounter처럼 앞에 _(언더 바)가 붙은 것은 private로 설정하기 위함입니다.

 

_counter라는 변수가 있는데 초깃값이 0으로 설정되어 있습니다.

 

_incrementCounter 함수는 _counter를 1 증가합니다. setState 함수를 호출하면 stateful 위젯인 MyHomePage 위젯 상태가 변했기 때문에 위젯을 갱신합니다

 

floatingActionButton은 하단에 표시되는 + 버튼을 의미합니다. onPressed 이벤트가 발생하면 _incrementCounter 함수를 호출합니다.

 

 

 

간단한 앱 만들기

 

lib에서 simple_app.dart를 하나 생성했습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'Hello Flutter',
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Text('Hello Flutter'),
      ),
    ));

위의 코드를 작성하고 빌드를 하였습니다.

 

 

 

material.dart를 import 해주었습니다.

 

main함수에서 runApp 함수를 호출해주고 runApp 함수 안에 인자로 MaterialApp 위젯을 만들고 title을 작성하였습니다.

Home 속성으로는 Scaffold 위젯을 지정하고 appBar과 body 속성을 지정하고, appBar에는 AppBar 위젯을 넣고 title을 작성, body로는 text 하나를 지정하였습니다.