2. Flutter 기본 코드 분석, 구조의 이해

 

Flutter의 기본 이해를 하고자 오른쪽과 같이 작성된 앱의 구조를 분석해보고자 한다.

 

// ignore_for_file: prefer_const_constructors
// ignore_for_file: prefer_const_literals_to_create_immutables
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 const MaterialApp(
      debugShowCheckedModeBanner: false, //디버그 띠 없앰
      title: 'BBANTO',
      home: Grade(),
      
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true,
        elevation: 0.0,

      ),
      body: Padding(padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
            child: Column( 
              crossAxisAlignment: CrossAxisAlignment.start, //왼쪽 정렬
              children:  <Widget>[
              Center(
                child: CircleAvatar(
                  backgroundImage: AssetImage('assets/Lenna.png'),
                  radius: 60.0,
                  
                ),
              ),
              Divider(
                height: 60.0, //Divider 위아래로 30픽셀씩
                color: Colors.grey[850],
                thickness: 0.5,//선 두께
                endIndent: 30.0 ,// 선이 끝에서 어느정도 떨어져 있나?, css의 padding 속성
              ),
              Text('NAME',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
              ),),
              SizedBox(
                height: 10.0,
              ),
            Text('레이디 아메리카', 
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
              fontSize: 28.0,
              fontWeight: FontWeight.bold
            ),),

            SizedBox(height : 30.0,),

            Text('파워 레벨',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
              ),),
              
              SizedBox(
                height: 10.0,
              ),

            Text('33', 
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
              fontSize: 28.0,
              fontWeight: FontWeight.bold
            ),),

            SizedBox(height: 30.0,),

            Text('Skill',
            style: TextStyle(
            color: Colors.white,
            letterSpacing: 2.0,
            fontSize: 35.0,
            fontWeight: FontWeight.bold
            )),
            SizedBox(height: 10.0,),

            Row(children:  <Widget>[
              Icon(Icons.check_circle_outline),
              SizedBox(width: 10.0,),
              Text('강렬한 미소',
              style: TextStyle(
                fontSize: 16.0,
                letterSpacing: 1.0
              ),),
            ],)
            ,
            Row(children:  <Widget>[
              Icon(Icons.check_circle_outline),
              SizedBox(width: 10.0,),
              Text('서민의 힘',
              style: TextStyle(
                fontSize: 16.0,
                letterSpacing: 1.0
              ),),
            ],)
            ,            
            Row(children:  <Widget>[
              Icon(Icons.check_circle_outline),
              SizedBox(width: 10.0,),
              Text('독보적인 제압력',
              style: TextStyle(
                fontSize: 16.0,
                letterSpacing: 1.0
              ),),
            ],)
            ,
            Center(child: CircleAvatar(backgroundImage: AssetImage('assets/Lenna.png'),
            radius: 20.0,
            backgroundColor: Colors.amber[800],),),

            ],),),
    );
  }
}

 

import 'package:flutter/material.dart'  : flutter 프로젝트를 시작하기 위해, 요소들을 import 한다.

 

class MyApp extends StatelessWidget : StatelessWidget에 정의된 요소들을 가지고 MyApp 클래스를 정의한다.

 

Widget build ~ MaterialApp  : MaterialApp을 생성하며, MaterialApp은 모든 구성요소의 최상단에 위치하며, 모든 Scaffold를 가진다.

 

 

   debugShowCheckedModeBanner : false; 브라우저 상 표시되는 디버그 띠를 삭제한다.

   title : 'BBANTO'  타이틀제목을 BBANTO로 설정한다.

   home : Grade(), 해당 페이지에 표기할 페이지를 설정한다.

 

 

 

Widget build ~ Scaffold  : MaterialApp 아래에서 동작하는 Scaffold 로서 정의한다.

 

Scaffold 이하 해당 페이지의 여러 요소를 정의 할 수있는데

 

backgroundColor : 배경 색상의 지정

appBar : 상단 앱바의 설정.

   title: 앱바의 타이틀

   backgroundColor: 앱바의 배경색

   centerTitle : 앱바의 중앙정렬

   elevation: 앱바의 띄워진 정도

 

 

또한 Flutter의 구조는 Scaffold안에서 여러 위젯이 부모-자식, 혹은 형제관계를 이룰 수 있다.

형제 관계의 위젯의 경우에는 브라우저의 흐름대로 놓이게 되며, 부모- 자식 관계의 경우

해당 위젯 안쪽에 놓이게 된다 ( Div 관계와 같음 )

 

 

예를 들어, 내가 Text라는 위젯을 배치한 후, SizedBox, 그리고 다시 Text위치를 배치하는 경우

SizedBox만큼 브라우저에서 크기를 차지하게 된다. (div에서 width, height등을 조정하고 아무것도 넣지 않고 다른 div를 아래 입력한 것과 같다 ) 

 

이렇게 형제 위젯의 경우, 순서대로 배치되는 것을 확인할 수 있다.

 

부모-자식 위젯의 경우에는 Scaffold 아래 있는 모든위젯들, 혹은 하단의 Row 위젯을 확인하면

바로 상위 <Widget> 에 대해 자식관계에 놓여 있는 것을알 수있다.