[Flutter] TextField 응용

• Column - children: <Widget>[] 형태로 안에 있는 Widget 들을 세로로 쌓아서 배치한다.

• Row - children: <Widget>[] 형태로 안에 있는 Widget 들을 가로로 배치한다.

• Flexible - 자식이 공간을 모두 채운다 (부모가 Column, Row 에 따라서 가로, 세로를 채움)

• Container - 자식 위젯을 컨트롤 하기 위한 용도로 많이 사용된다 (margin, alignment)...

• TextField - 이용자에게 값을 입력받기 위해 사용한다. controller가 반드시 필요하다.

import 'package:flutter/material.dart';
​
class ConcertInsert extends StatelessWidget {
  TextEditingController _tec = TextEditingController();
  TextEditingController _tec2 = TextEditingController();
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.black26),
        backgroundColor: Colors.white,
        elevation: 0.0,
        title: Text("Information registration",
            style: TextStyle(fontSize: 16, color: Colors.black26)),
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            Flexible(
              child: Container(
                alignment: Alignment(0.0, 0.0),
                height: 45,
                margin: EdgeInsets.only(left: 30, right: 30, top: 15),
                padding: EdgeInsets.only(left: 20, right: 20),
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    border: Border.all(width: 1, color: Colors.black12)),
                child: Row(children: <Widget>[
                  Container(
                    width: 60,
                    child: Text("Name",
                        style: TextStyle(fontSize: 16, color: Colors.black)),
                  ),
                  Flexible(
                    child: Container(
                      margin: EdgeInsets.only(right: 20),
                      child: TextField(
                        controller: _tec,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'Input Your Name',
                            hintStyle: TextStyle(color: Colors.grey[300])),
                        cursorColor: Colors.blue,
                      ),
                    ),
                  ),
                ]),
              ),
            ),
            Flexible(
              child: Container(
                alignment: Alignment(0.0, 0.0),
                height: 45,
                margin: EdgeInsets.only(left: 30, right: 30, top: 20),
                padding: EdgeInsets.only(left: 20, right: 20),
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    border: Border.all(width: 1, color: Colors.black12)),
                child: Row(children: <Widget>[
                  Container(
                    width: 60,
                    child: Text("Birth",
                        style: TextStyle(fontSize: 16, color: Colors.black)),
                  ),
                  Flexible(
                    child: Container(
                      margin: EdgeInsets.only(right: 20),
                      child: TextField(
                        controller: _tec2,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'Input Your Birth',
                            hintStyle: TextStyle(color: Colors.grey[300])),
                        cursorColor: Colors.blue,
                      ),
                    ),
                  ),
                ]),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
​