[Flutter] 기본 프로젝트 설명

이전에 만들었던 프로젝트를 열면 왼쪽 [Project]에 여러 파일들이 있습니다.

기본적으로 작업하는 dart 파일은 lib 폴더에 그리고 특이하게도 테스트 용 dart 폴더가 따로 존재합니다. 그 의외에도 여러 파일들이 있지만 추후 설명하겠습니다.

 

dart 파일을 위에서부터 보겠습니다. 먼저 import 입니다. 소스 파일에서 사용하려는 패키지를 불러올 때 사용합니다. 

import 'package:flutter/material.dart';

해당 패키지한 내용은 이 링크를 통해 확인하실 수 있습니다.

 

다음으로 main 함수입니다. runApp을 통해 위젯을 전달해 앱을 시작하게 됩니다.

void main() {
  runApp(const MyApp());
}

다음으로 전달되는 위젯 클래스 MyApp입니다. MyApp은 StatelessWidget이라는 클래스를 상속받았습니다. StatelessWidget을 상속받은 위젯은 변화가 없는 즉 Run 이후 한번 로딩되면 바뀔일이 없는 위젯이 상속받아 사용합니다. 이 StatelessWidget은 build를 한번 호출해 기본 UI를 미리 구축해 놓습니다. 이제 StatelessWidget을 상속받은 MyApp도 build를 재정의하여 MyApp만의 화면을 build하여 MaterialApp을 리턴합니다. 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',        // 앱 이름
      theme: ThemeData(
        primarySwatch: Colors.blue,     // 테마 색깔
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),    // 앱 실행시 첫 실행할 위젯 지정
    );
  }
}

다음으로 MyApp에서 지정한 첫 실행에 세팅된 MyHomePage 클래스입니다. 이 클래스는 위 클래스와 다르게 StatefulWidget을 상속받았습니다. StatelessWidget과 다르게 화면에 갱신이 필요한 위젯(클래스)는 이 클래스를 상속받습니다. StatefulWidget은 먼저 State를 생성하기 위해 createState를 호출하는데 이때 State 객체를 생성합니다. createState() 옆에 =>는 return 이라고 생각하시면 됩니다. 

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

마지막으로 생성한 State에 대한 설명입니다. 아래 build는 위 StatelessWidget과 같이 Widget을 생성해 반환하여 화면에 그려줍니다. 가장 처음에 있는 counter 변수는 언더바가 가장 앞에 적혀있는데 이는 현재 dart 파일에서만 사용한다는 의미입니다. incrementCounter 함수도 내부 함수이며 구현에 setState를 통해 위젯을 갱신합니다.

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>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

build에서 Scaffold라는 것을 return 하는데 기본 어플의 뼈대라고 생각하면 편할거 같습니다. 기본적으로 appbar, body,bottomNavigationbar 등이 있고 상황에 따라 원하는 구조를 추가할 수 있고 Scafforld 내에서 [ctrl] + [space]를 통해 옵션들을 확인할 수 있습니다. 

body에 Center 함수로 화면 가운데 위치시키면서 child 옵션으로 Column을 그 안에 Children을 통해 Text 위젯들을 넣었습니다. 이처럼 하위에 위젯을 놓을 때 하나를 놓기 위해선 child, 여러개를 놓기 위해서는 children을 호출합니다.

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

마지막으로 floatingActionButton에 있는 onPressed는 클릭하였을 때 incrementCounter 함수를 호출해주고 그 함수는 위에서 setState를 통해 count 개수를 늘리며 화면을 갱신해주고 있습니다.