[Flutter] 기초 위젯 사용

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); //MyApp class 실행
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //상단 바(appBar), 메인(body), 하단 바(bottomNavigationBar) 3개로 분할해주는 위젯
        appBar: AppBar( title: Text('제목 테스트', style: TextStyle(fontWeight: FontWeight.w900),), //큰 스타일이 아니라면 style에서 지정
                        leading: Icon(Icons.icecream_outlined), actions: [ //title은 제목, leading은 title 앞 icon 쓸 때 사용됨, actions는 오른쪽 버튼들
          Icon(Icons.cake), //icon은 Icon 위젯을 활용해 작성
          Icon(Icons.cake)
        ],),

        body: Align( //정렬 상세 단순 센터 정렬은 Center() 위젯도 있음
          alignment: Alignment.topLeft,
          child: SizedBox(
            child: Row(
                children: [
                  Image.asset('assets/test.png'), //pubspec.yaml에서 assets에 대한 사전 설정이 필요하고 get을 통해 update 적용 후 사용
                  SizedBox(
                    child: Column(
                      children: [
                        Text('1'),
                        Text('2'),
                        Text('3'),
                      ],
                    ),
                  )
                ]
            )
          ),
        ),

        bottomNavigationBar: SizedBox(//Container로 감쌀 수도 있지만 높이 너비 child 정도만 할 때는 가벼운 SizedBox
          width: double.infinity, height: 50, //기본단위 LP
          child: Row( //가로로 정렬, column은 세로로 정렬
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, //메인 축 요소 aligin 설정
              crossAxisAlignment: CrossAxisAlignment.center, //반대 축 요소 aligin 설정
              children : [ //row 처리할 요소들
                Icon(Icons.cake),
                Icon(Icons.cake),
                Icon(Icons.cake),
              ]),
        ),
      ),
    );
  }
}