Flutter Chapter-01-02 Material 디자인과 Widget(위젯) 사용법

저번 챕터에서는 기본적인 플러터 위젯사용법을 배웠다.

하지만 이미지를 봤듯이 App도아닌 그냥 일반적인 이미지 와 같았다.

요번 시간에는 Scaffold를 사용해서 앱의 기본적인 구성으 구현하도록 하겠다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('이미지 불러오기 앱'),
          backgroundColor: Colors.amber,
        ),
        body: const Center(
            child: Image(
          image: NetworkImage('https://postfiles.pstatic.net/MjAyMTEyMDhfMTU1/MDAxNjM4OTUxNjE1NTM1.U3nTrjIWm2jCkCoT4PFzxgsly8P-MUZtnEcI1aJQG0Ag.RoXXZ6utFTyArh_piFLUa4NcFdsxfulxNm17FkP8xjQg.GIF.qkrxodudtls/se%EF%BC%BFone%EF%BC%BFani%EF%BC%BF20211208%EF%BC%BF172000%EF%BC%BFa.gif?type=w773'),
        )),
        backgroundColor: Colors.amber,
      ),
    ));

Scaffold안에는 많은 위젯들이 존재한다.

appbar, body, bottomNaviationBar... 등등등 그중에서 일단 우리가 봐야 될 것은 AppBar와 Body 그리고 bottomNaviationBar일것이다.

현재는 Appbar와 Body 정도를 구현하였으며, 해당 하는 소스코드가 어떻게 동작 하는지 다시한번 살펴 보도록 한다.

 

해당하는 url은 flutter 개발자 독스로 해당하는 위젯들안에 어떤 위젯들이 있고 어떤형식으로 동작하는지 잘 기술되어 있다.  https://api.flutter.dev/flutter/material/Scaffold-class.html

실행화면

위의 트리형식의 구조를 보면 Material 안에 Scaffold가 구성되고 그 밑에 3개의 Appbar, body, backGroundColor가 구현되어 있는 것을 알 수있다.

해당하는 기능들은 위 중간 백그라운드색상 3가지로 나눠지며 각각에 부위에 기술하게 될 시 해당 영역으로 들어가지는 것 을 알 수 있다.