[Flutter] Widget에 관하여

안녕하세요 flutter를 올린지 몇 개월이 지나서야 다시 올리네요.. 저번에는 책을 구매해서 따라해보려고 했는데 실패.. 아니 ... 방법을 바꿨습니다. 책은 현재 나온 3.0버전과 내용이 많이 다르고 보다보면 심지어 개념도 헷갈리기도 해서 영어 울렁증을 마다하고서라도 flutter 홈페이지에서 제공하는 영상과 문서들을 보고 앱을 만들어보는게 낫지 않을까~~ 라는 생각을 하게 되었네요..ㅎㅎ 구매한 책은.. flutter가 좀 익숙해진 뒤에 대충 훓터볼 예정입니다. 그럼 그 때 아~~ 이게 이거 였네~ 하면서 넘길 수 있습니다. C와 자바도 그러한 경험이 있었습니다 ㅎㅎ

우선 알아 볼 내용은,

1. Flutter가 무엇인지

2. Widget의 조합 및 구성이 어떻게 이루어 지는지

 

3. 실제 코드

입니다.

Flutter는 앱을 구축하는 도구 키트입니다. 실제 건축을 할 때 망치나 드라이버 같은 도구들을 만드는 것 부터 시작하지 않죠? 그런 도구 하나하나를 Widget이라고 합니다. Flutter는 Widget을 기본적으로 제공한다는 겁니다. Widget이 모여 또 다른 Widget이 되기도하고 앱이 되기도 합니다. 우리는 이러한 Widget을 잘 조합한다면 자신만의 훌륭한 앱을 만들 수 있을 것입니다.

만약 Widget의 조합으로 앱을 만들었다고 가정 해봅시다. 그 앱안의 Widget들은 서로 부모 자식 형제 조카 등의 관계를 형성하고 Flutter의 한 메소드에서 위젯의 위치?Level?을 감지합니다.

우리는 아직 모르는 것에(Provider) 얽매일 필요가 없습니다. Widget의 Level이 위로 갈수록 포괄적이고, 밑으로 내려갈수록 제한적이고, 전문적인 성향을 갖는 다는 걸 먼저 알고 이해 하면됩니다~ 일단은~

그럼 코드로도 살짝 맛을 볼게요.

적절한 예시는 아니지만... 제가 기존에 책으로 공부하면서 따라했던 코드가 있었네요.. 그래도 widget들이 많이 들어가 있습니다.

import 'package:flutter/material.dart';

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

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        title: 'Hello World Travel Title',

        home: Scaffold(

          appBar: AppBar(

            title: Text('Hello World Travel App'),

            backgroundColor: Colors.deepPurple,

          ),

          body: Builder(builder: (context) {

            return Center(

              child: Column(children: [

                SizedBox(

                  width: 300,

                  child: Center(

                    child: Row(

                      children: [

                        Text('hello world',

                            style: TextStyle(

                                fontSize: 26,

                                fontWeight: FontWeight.bold,

                                color: Colors.blue[800])),

                        const Text('Discover the World',

                            style: TextStyle(

                                color: Colors.deepPurpleAccent, fontSize: 20)),

                      ],

                    ),

                  ),

                ),

                //Image.network('https://images.freeimages.com/images/large-previews/eaa/the-beach-1464354.jpg', height: 350,),

                Image.network(

                    'https://images.freeimages.com/images/large-previews/c03/colour-math-function-1170167.jpg',

                    height: 350),

                RaisedButton(

                    child: const Text('Contact Us'),

                    onPressed: () => contactUs(context))

              ]),

            );

          }),

          bottomNavigationBar: BottomAppBar(

            child: Row(

              mainAxisAlignment: MainAxisAlignment.spaceAround,

              children: [

                Icon(Icons.home),

                Icon(Icons.add),

                Icon(Icons.menu),

              ],

            ),

          ),

        ));

  }

  void contactUs(BuildContext context) {

    showDialog(

      context: context,

      builder: (context) => AlertDialog(

          title: Text('Contact Us'),

          content: Text('Mail us at hello@world.com'),

          actions: <Widget>[

            FlatButton(

                child: Text('close'),

                onPressed: () => Navigator.of(context).pop())

          ]),

    );

  }

}

중간중간 클래스로 빼야하지만 저도 처음 Flutter를 해본지라.. 대충만~ 봅시다 Text, Center, SizedBox 이렇게 대문자로 시작해서 ()로 호출하는 것들이 Widget입니다. Widget이 안쪽으로 들어갈 수록 제한적이고, 전문적인 역할을 한다는 걸 보여주고 있습니다. MaterialApp()같은 Widget은 방대하고 포괄적이죠 하지만, TextStyle()같은 Widget은 글자의 크기, 색등을 표현 해주는 전문적인 성향을 나타내고 화면의 픽셀단위까지 관리하는 것이죠.

이번의 예시코드는 그냥 이런 구조로 위젯을 나열할 수 있구나 정도로만 봐도 될것 같습니다.
다음에는 저도 좀 더 이해하고 싶은 개념 state관리에 대해서 작성해보겠습니다.

하트나 댓글은 포스팅에 큰 도움이 됩니당♡