Flutter 라인 잡기

Flutter

• 플러터의 위젯은 보통 앞에 대문자로 시작해서 뒤에 소괄호가 붙는다.

1. 글자 위젯 => Text()
2. 이미지 위젯 => Image.asset('경로')
3. 아이콘 위젯 => Icon(Icons.아이콘 이름)
4. 박스 위젯 => Container() , SizedBox()
   4.1) Container() 은 무겁다
   4.2) SizeBox() 는 가엽고 ,width,height,child 만 필요할때 사용한다.

Center 는 내자식 위젯의 기준점을 중앙으로 설정해준다.

child 는 자식 위젯을 집어넣을 수 있도록 도와주는 파라미터이다(필수!!)

Scaffold() 위젯은 위젯을 상 중 하 로 나누어 준다.

appBar : AppBar => 상단에 들어갈 위젯
body : 중단에들어갈 위젯
bottomNavigationBar => 하단에 들어갈 위젯임

여러 위젯을 가로로 배치하는법 : Row(children:[])
여러 위젯을 세로로 배치하는법 : Column(children:[])

이런 Row, Column 요소를 정렬하려면??
mainAxisAlignment : 가로축 정렬
crossAxisAlignment : 세로축 정렬

실습 main.dart

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('앱임'),
        ),
        body: Text('안녕'),
        bottomNavigationBar: BottomAppBar(
          child: SizedBox(
            height: 70,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page)
              ],
            ),
          ),
        ),
      ),
    );
  }
}