[Flutter] Flutter 시작할 때 알아야 되는 개념 알아보기

import와 void main

import 'package:flutter/material.dart';

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

처음에 플러터를 시작하게 되면 main.dart 파일을 만들게 된다. 이는 기본적으로 만들지 않아도 생성되는 파일이다.

• 그래서 임포트를 해서 material.dart package를 가져오면 된다.
• 그리고 나서 void main() {runApp(MyApp())};라는 main이라는 함수를 실행하게 된다.
• 여기서 MyApp()은 자기 마음대로 이름을 바꿔도 된다.

materialApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: onBoardingPage(),
    );
  }
}

MaterialApp는 Material Design Pattern으로, 내가 짜게 되는 모든 하위 페이지를 포함하게 된다. 이가 없이 코드를 짜게 된다면 오류가 발생한다. 

옵션

1. title : 간단한 앱의 한 줄 설명을 말한다. 안드로이드의 경우 최근 사용한 앱에 표시되며, IOS는 사용할 수 없다.
2. theme : 단어 그대로 앱의 테마를 설정한다.

// 상호작용 요소에 사용되는 색상
brightness: Brightness.light,

// 앱의 주요부분 배경 색 (앱바, 탭바 등)
primaryColor: Colors.greenAccent,

// 위젯의 전경색
accentColor: Colors.redAccent,

// 앱에 기본으로 사용될 폰트
// fontFamily: 'IBM-Sans'

→ 내 경우에는 theme에 primarySwatch를 사용한다. 이는 속성값을 통해 테마를 설정할 수 있다. 미리 제공되는 견본 색상을 의미하며 Colors클래스를 사용하게 되면 이에 다양한 견본색상들을 사용할 수 있다. Material Design에서 제공되는 색상들을 제공한다.

Material Design에서 제공되는 색상표

Colors.red[200]

이렇게 Colors클래스를 불러와서 사용하고자 하는 컬러의 이름을 쓰고 []를 써서 세세하게 색상을 정해주면 된다. 잘 모르겠다면 색상의 이름을 쓰는 순간 자세한 색상이 보여진다.

3. home : MaterialApp의 기본 경로로 앱 실행 시 가장 먼저 볼 수 있는 화면을 말한다. Scaffold 위젯을 사용하여 정의한다. 

Scaffold

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Page'),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Main Screen',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
          ),
          ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushReplacement(
                    MaterialPageRoute(builder: (context) => onBoardingPage()));
              },
              child: const Text('Go to onboarding screen'))
        ],
      )),
    );
  }
}

옵션

1. appbar : appbar는 앱을 띄우면 맨위에 제목을 의미한다. appbar는 있을 수도 있고, 없을 수도 있다.
2. body : appbar가 위치하지 않은 나머지들을 의미한다.

flutter options 설명

🔗 참고

https://100sucoding.tistory.com/33

https://ahang.tistory.com/7 → MaterialApp

https://points.tistory.com/65 → primartSwatch