Flutter 기본 코드

기본 코드를 이해해보자.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

 

runApp(MyApp());

runApp() 함수는 Flutter에서 최상위에 존재하는 함수로 처음 한번 호출되며, 반드시 위젯은 argument로 전달 받아야 한다.

위의 코드에서 MyApp()은 Flutter 프레임워크에서 제공하는 기본 위젯이 아니라 어플리케이션을 개발할 때 직접 정의하고 작성해야 하는 커스텀 위젯(Custim widget)이다.

 

 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

위의 코드는 StatelessWidget 형태로 작성되었으며, runApp() 함수에 전달되는 MyApp() 위젯은 최상위 위젯으로 최초로 어플리케이션의 레이아웃을 빌드하는 역할을 수행한다.

이러한 커스텀 위젯은 또 다른 위젯을 return 하는 build라는 메소드(Method)를 가지고 있다.

 

---

app.dart 파일에서 정의된 MaterialApp() 위젯

예를 들어, MaterialApp() 기본 위젯을 사용하는 것은 실제 Flutter 프레임워크가 제공하는 기본 MaterialApp 위젯 클래스를 통해 새로운 인스턴스를 만들어 사용하는 것이며, MaterialApp() 클래스는 위의 사진처럼 생성자로 다양한 속성(Argument)를 가지고 있다.

 

클래스를 통해 인스턴스가 새롭게 생성될 때 사전에 정의된 생성자는 최초 한번 실행 되는 특징이 있다.

예시로, MaterialApp() 위젯 클래스의 생성자의 속성(argument) 중에는 title 속성(argument)가 있다.

this.title = ''

title argument는 빈 문자열로 미리 정의되어 있다. 그렇기에 우리가 MaterialApp() 위젯을 사용할 때 별도로 title arguement 를 정의해주지 않는다면 생성자의 특징에 따라 인스턴스가 새롭게 생성될 때 최초 한번이 실행되어 빈 문자열로 정의된다.

 

title: 'My First Flutter App'
앱을 총칭하는 기본 타이틀 .

theme: ThemeData(primarySwatch: Colors.blue),
앱의 기본적인 디자인 테마를 지정하는 속성.

primarySwatch
Swatch는 견본을 의미하며 앱에서 기본적인 색상 견본을 의미한다.
특정색의 음영들을 기본 색상으로 지정해서 사용.

Colors.blue
머테리얼 디자인에서 제공하는 다양한 색상들 중 blue 계열의 음영을 사용하겠다는 의미.

home: MyHomePage(),
home은 앱이 정상적으로 실행되었을 때 가장 먼저 화면에 보여주는 경로로 MyHomePage()는 커스텀 위젯이다.

 

 

 

 

출처 : https://velog.io/@5yattree/flutternote004-%ED%94%8C%EB%9F%AC%ED%84%B0-%EA%B8%B0%EB%B3%B8-%EC%BD%94%EB%93%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-2