[Flutter]Flutter 쉽게 시작하기

이원찬·2024년 1월 16일

flutter

Flutter

목록 보기

2/2

아래 영상을 보고 정리한 내용입니다.

How do I make my first Flutter app

TO-DO-LIST 앱 만들기

위 앱은 여러개의 위젯들로 구성되어 있다.

이렇게 말이다.

Main 함수

그렇다면 flutter를 코드(dart)코드를 만들어 보자

import 'package:flutter/material.dart';

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

먼저 앱이 의존하는 것들 (import문) 을 적어주고 main 함수를 정의한다.

여기서 main 함수는 한가지 기능만 수행하면 된다.

앱을 실행하는 것이다.

runApp() 함수

runApp()은 flutter의 특정 메서드로 우리가 정의한 앱 위젯 체계의 가장 상단에 위치하게 된다!

우리는 이것을 위젯트리의 root라 한다.

우리는 이 runApp에 전체 앱을 넣고 우리가 커스텀한 위젯들을 넣으면 된다.

import 'package:flutter/material.dart';

void main() => runApp(
  // MaterialApp
  // Scaffold
  // AppBar
  // Text
  // body: Column
  // text, text, text
  // image
  // Row
  // text, text, text
  // ....
);

하지만 이런 코드는 모던 코딩 패턴과 맞지 않다.

작은 코드가 하나의 책임을 가지고 여러개의 작은 코드가 모여 하나의 기능을 수행하게끔 하는 것이 모던 패턴이다.

이런 기능을 수행하기 위해 flutter가 제공하는 것이 위젯이다. (Widget)

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
  
  }
}

모든 위젯들은 StatelessWidget 이나 StatefulWidget 을 확장 (extend) 하여 새로운 계층을 생성하여 직접 커스텀 가능하다.

모든 위젯은 한가지 메서드가 필요하다.

위에도 보이듯이 build 메서드 이다.

build 메서드는 위젯을 구축하는 방법을 다른 위젯의 측면에서 설명하며 묘사한다…

build 의 리턴 타입이 어떻게 위젯이 되는지 보자

MeterialApp과 Scaffold

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
		// 모든 앱은 MeterialApp으로 부터 시작
    return MaterialApp(
        title: 'Exploration',
        theme: ThemeData(primarySwatch: Colors.blue),
				// MyHomePage를 별개의 위젯으로 분리한다!!
        home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

다양한 앱이 상단에서 MerialApp 과 시작하며 홈페이지(MyHomePage)를 별개의 위젯으로 분리한다.

한번 실행해보자

아무것도 뜨지 않는다.

왜냐하면 이것이 앱이라는 걸 알려주는 코드가 없기 때문에 아무것도 안뜨는 것이다.

우리는 Scaffold 를 추가하여 일반적인 앱패턴을 제공가능하다.

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Space Exploration Planner'),
        ),
    );
  }
}

그런데 영상처럼 appBar의 색이 자동으로 퍼런색으로 되지 않았다.

찾아보니 flutter 버전에 따라 appbar의 색이 자동으로 선택되지 않는다고 한다 (최신이면 선택안됨!)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Exploration',
        theme: ThemeData(
          appBarTheme: AppBarTheme(
            color: Colors.blue,
          ),
        ),
        home: MyHomePage()
    );
  }
}

MaterialApp 에 appBarTheme 를 추가 하여 퍼런색을 만들었다.

이 상태에서 쭉 만들어 보자

Progress 위젯

일단 가장 먼저 진행바 (프로그래스바 : progressbar) 위젯을 만들어 보자

...
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Space Exploration Planner'),
      ),
      body: Column(
        children: [
          Progress(),
        ],
      ),
    );
  }
}

class Progress extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Progress...'),
        LinearProgressIndicator(
          value: 0.1,
        ),
      ],
    );
  }
}

TaskList 위젯

그다음 Task List 위젯을 만들어보자

...
class TaskList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TaskItem(),
        TaskItem(),
        TaskItem(),
      ],
    );
  }
}
...

TastItem 위젯

그러면 태스크를 담을 TaskItem 위젯을 만들어 보자

...
class TaskItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
          value: false,
          onChanged: (value) {},
        ),
        Text('Task'),
      ],
    );
  }
}
...

이쁘게 잘 나왔다.

하지만 재사용성을 높히기 위해 Task 내용을 label이라는 변수로 받아서 처리하도록 만들어 보자

...
class TaskList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TaskItem(label: "Task 1"),
        TaskItem(label: "Task 2"),
        TaskItem(label: "Task 3"),
      ],
    );
  }
}

class TaskItem extends StatelessWidget {

  final String label;

  TaskItem({this.label = "Task"});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
          value: false,
          onChanged: (value) {},
        ),
        Text(label),
      ],
    );
  }
}
...