Margin, Padding

EdgeInsets.all: EdgeInsets.only: (top , bottom, left, right) EdgeInsets.symmetric:(horizontal: 좌, 우), (vertical: 위, 아래)

    TextEditingController controller = TextEditingController();

      @override
      Widget build(BuildContext context) {              
              TextField(
                obscureText: true,                  // 암호화
                cursorColor: Colors.black,        // 커서 색상
                textAlign: TextAlign.start,         // 텍스트 시작점
                controller: controller,             // 입력값 받아옴 (실시간)
                style: TextStyle(fontSize: 15),
                decoration: InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(),
                ),
              ),

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Hello Flutter',
            style: TextStyle(
              fontSize: 35,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          centerTitle: true, // Android에서도 타이틀 가운데 정렬
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(24.0), 
            // EdgeInsets.only: 특정 방위만, EdgeInsets.symmetric: 위/아래, 좌/우
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(32.0),
                  child: Image.network(
                    'https://cdn-icons-png.flaticon.com/512/1271/1271847.png',
                    width: 81,
                  ),
                ),
                TextField(
                  decoration: InputDecoration(
                    labelText: '이메일',
                  ),
                ),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: '비밀번호',
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 40,
                  margin: EdgeInsets.only(top: 16.0),
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text(
                      '로그인',
                      style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                    ),
                  ),
                ),
                TextButton(
                  onPressed: () {},
                  child: Text('data'),
                ),
                IconButton.filled(
                  onPressed: () {},
                  icon: Icon(Icons.verified_user),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

return에 MaterialApp 위젯 추가할 것.

사용방법 (Row도 동일함, 가독성을 위해 <Widget>을 작성했다. 사용하지 않아도 괜찮다.)

body: Column(
    childern: <Widget> [...]
)

mainAxisAlignment

main축 위치 지정를 지정합니다. mainAxisAlignment: MainAxisAlignment.<> start: 위 혹은 왼쪽 center: 가운데 end: 아래 혹은 오른쪽 spaceAround: 자식들 사이 일정한 가격, 간격의 반을 양 끝 부분에 줌 spaceBetween: 자식들 사이 일정한 간격 spaceEvenly: 양 끝과 자식들 사이의 일정한 간격

mainAxisSize

컬럼 사이즈를 지정합니다. mainAxisSize: MainAxisSize.<> max: 자식 위젯 상관없이 가능한 최대 사이즈 min: 자식 위젯만큼만

CrossAxisAlignment

가로 축의 위치를 지정합니다. crossAxisAlignment: CrossAxisAlignment.<> start: 가로 축에서 왼쪽 center: 가로 축에서 가운데 end: 가로 축에서 오른쪽 strech: 가로영역을 최대로 확장

VerticalDirection

위젯의 세로 방향 순서를 정해줍니다. verticalDirection: VerticalDirection.<> down: 코드 순서대로 그려줌 up: 코드 순서상 아래 위젯부터 그림

Expanded

Column안에 있는 자식 위젯을 Expanded로 감싸면 감싼 위젯을 최대 영역으로 확장하게 됩니다.

사용 예시

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(),
    );
  }
}

MaterialApp home에 감싸져 있음.