시작하기 전에... 

본격적인 글을 시작 하기전에 예전부터 항상 위젯 시리즈를 연재해 보고 싶었습니다. 굉장히 쉬운 위젯도 있지만, CSS 만큼이나 어렵고, CSS보다 훨씬 길게 코딩해야 하는 복잡하고 난해한 위젯도 많이 있습니다. 하지만, 제가 말씀 드렸듯, 모두 위젯이기 때문에, 우리가 같은 코드만 쓰면 제가 구현한 것을 여러분도 구현할 수 있고, 제가 예전에 구현 했던 UI 위젯을 또 고심하며 안 만들어도 되기 때문 입니다. 

CSS 나 자바스크립트 파일이 함께 있어야, HTML 소스코드의 스타일링이 정확히 입혀지지만, 플러터는 다릅니다. 위젯 이기 때문에, UI를 만든다기 보다 있던 UI를 조정한다는 느낌이 강해서, 그 설정값만 있으면 누구든 같은 디자인을 뽑아 낼 수 있습니다. 그래서 제가 지금까지 만들었던, 그리고 앞으로 만들 위젯 코드를 공유해 보겠습니다. 우리가 앱에서는 자주 보면서 넘어갔던 디자인 중 어떻게 UI를 그릴지 고민스러운 것들이 처음에는 많았는데, 이제는 편해 졌습니다. 함께 공유하고 함께 발전하는 자리가 되었으면 합니다.

Align Widget 

오늘 알아볼 Widget은 Align Widget 입니다. 백문이 불여일견이죠.

위 이미지의 코드 입니다. 

import 'package:devkitflutter/ui/reusable/global_widget.dart';
import 'package:flutter/material.dart';

class AlignWidgetPage extends StatefulWidget {
  @override
  _AlignWidgetPageState createState() => _AlignWidgetPageState();
}

class _AlignWidgetPageState extends State<AlignWidgetPage> {
  // initialize global widget
  final _globalWidget = GlobalWidget();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: _globalWidget.globalAppBar(),
        body: ListView(
          padding: EdgeInsets.fromLTRB(24, 24, 24, 16),
          children: [
            _globalWidget.createDetailWidget2(
                title: 'Align Widget',
                desc: '간단하게 얼라인을 맞출 수 있게 하는 위젯 중 하나',
                icon: Icons.text_format
            ),
            Container(
                margin: EdgeInsets.only(top: 10, bottom: 8),
                child: Text('Align top left')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.topLeft,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align top center')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.topCenter,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align top right')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.topRight,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align center left')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align center')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.center,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align center right')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.centerRight,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align bottom left')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.bottomLeft,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align bottom center')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
            Container(
                margin: EdgeInsets.only(top: 20, bottom: 8),
                child: Text('Align bottom right')
            ),
            Container(
              height: 150,
              color: Colors.green,
              child: Align(
                alignment: Alignment.bottomRight,
                child: Text('Text', style: TextStyle(
                    color: Colors.white
                )),
              ),
            ),
          ],
        )
    );
  }
}

간단한 몇개의 블럭인데 상당히 코드가 깁니다. HTML 이었으면 몇줄 안 나왔을텐데요!

위 코드를 보면 Listview를 사용했기 때문에 Container 위젯이 좌우 width를 100% 사용할 수 있는 것 입니다. 

자세한건 Listview와 Container 위젯에서도 언급할 것입니다.

이런 위젯은 간단하지만, 처음 플러터를 접하시는 분들께는 매우 도움이 될 것이라 생각합니다. 숙련자 분들이 볼만한 아래 같은 위젯들도 곧 공개 할께요!