코딩기록

플러터 Cloumn 과 Row 본문

프론트엔드/Flutter

플러터 Cloumn 과 Row

빌럽스 2024. 3. 11. 20:39
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() { // main 스레드는 runApp을 실행시키고 종료됨
  runApp(FirstApp()); // 비동기로 실행됨 (이벤트루프에 등록된다.)
  sleep(Duration(seconds: 3));
  print("main 종료");
}

// 저장만 하면 화면이 리도드 됨 = 핫 리로드
class FirstApp extends StatelessWidget {
  const FirstApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // CupertinoApp() -> IOS 앱
      // 안드로이드앱을 만들거에요
      home: SafeArea(
        child: Scaffold( // 기본구조를 만들고 있어요
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text("First App"),
            leading: Icon(Icons.menu),
          ),
          body: Container(
            height: 100,
            child: Row(
              children: [
                Expanded(
                  flex: 3,
                  child: Container(
                    color: Colors.green,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.red,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.orange,
                  ),
                )
              ],
            ),
          ),
          // body: Column( // 부모의 제약조건을 자식이 따라간다. 자식이 부모의 제약조건을 벗어날 수 없다.
          //   mainAxisAlignment: MainAxisAlignment.spaceBetween, // 수직정렬
          //   crossAxisAlignment: CrossAxisAlignment.stretch,
          //   children: [
          //     Container( // 부모 영역 한도에서 내가 가질 수 있는 최대크기 차지한다.
          //       // 근데 컬럼은 크기가 없어서 안됨
          //       height: 100,
          //       width: 100,
          //       color: Colors.orange,
          //       //height: 50,
          //     ),
          //     Container( // 부모 영역 한도에서 내가 가질 수 있는 최대크기 차지한다.
          //       height: 100,
          //       width: 100,
          //       color: Colors.green,
          //       //height: 100,
          //     ),
          //     Container( // 부모 영역 한도에서 내가 가질 수 있는 최대크기 차지한다.
          //       height: 100,
          //       // width: 100,
          //       color: Colors.red,
          //       //height: 50,
          //     )
          //   ],
          // ),
          floatingActionButton: FloatingActionButton(
            child: Text("button"),
            onPressed: () {
              print("버튼 클릭됨");
            },
          ),

          bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(label: "hello", icon: Icon(
                Icons.access_alarm_rounded,
              )),
              BottomNavigationBarItem(label: "hello", icon: Icon(
                Icons.access_alarm_rounded,
              ))
            ],
            backgroundColor: Colors.yellow,
          ),
        ),
      ),
    );
  }
}