TIL) Flutter - 기본 코드 이해하기

1. import하기
   import 'package:flutter/material.dart';
2. 컴파일러에게 시작점 알려주기 위해 void main() 불러오기
3. 플러터 최상위 함수인 runApp() 불러오기
4. runApp() 내에 Custom Widget 이름을 argument로 넣어주기
5. StatelessWidget으로 Custom Widget 생성하기
6. Custom Widget 반환(return)하기
7. Custom Widget 내 title 지정해주기
8. Custom Widget 내 themeData() 불러오기
9. primarySwatch argument 불러오기
10. color 지정해주기
11. home에서 이름 지정해주기

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First app',
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(),
    );
  }
}

---

• Scaffold

  무언가를 혼자 해낼 수 있도록 발판을 만들어 주다.

앱 화면에 다양한 요소들을 배치하고 그릴 수 있도록 도와주는 역할을 한다.

• body

  앱 화면을 만드는 시작점인 만큼 Scaffold 내에서 가장 중요한 요소

• children

  다수의 자식을 입력받는다.

  1. Column - children 매개변수로 입력받은 모든 위젯을 세로로 배치한다.
  2. ListView - children 매개변수로 입력받은 다수의 위젯이 화면을 벗어나면 스크롤 가능하게 한다.
  3. Row - children 매개변수로 입력받은 모든 위젯을 가로로 배치한다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PhotoDays',
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PhotoDays"),
      ),
      body: Center(
          child: Column(
            children: <Widget>[
              Text('Hello'),
              Text('Hello'),
              Text('Hello'),
            ],
          )),
    );
  }
}

MyHomePage 위젯의 코드가 길어진다면 따로 분리해서 작성할 수 있다.

출처: 유튜브 코딩셰프님 강의