flutter 실습 - UI 기초

과제: UI 기초

• 상단: 메뉴 만들기
• Column 활용
• SafeArea 설정
• Padding 설정 - horizontal 30 적용
• Row - Text - Spacer 활용
• TextStyle
• fontWeight: bold
• color: black87

• 이미지 2개 놓기
• assets/ 폴더에서 이미지 끌어오기
• Expanded 활용하여 2분할 최대 크기
• BoxFit 활용
• Alignment 활용하여 사진 최적 위치 확대하기
• 이미지 사이 간격: height 10

실습

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: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SafeArea(
            child: Padding(
              padding: EdgeInsetsDirectional.symmetric(horizontal: 30),
              child: Row(
                children: [
                  Text(
                    "Home",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  Spacer(),
                  Text(
                    "Business",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  Spacer(),
                  Text(
                    "Press",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  Spacer(),
                  Text(
                    "Contact",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(child: Image.asset('assets/bicycle.jpg', fit: BoxFit.cover)),
          SizedBox(height: 10),
          Expanded(
            child: Image.asset(
              'assets/book.png',
              fit: BoxFit.cover,
              alignment: Alignment.centerLeft,
            ),
          ),
        ],
      ),
    );
  }
}

결과