Flutter 실습01

Store 만들기

SHIN

Sep 30, 2024

💡

Android : Material Design

iOS : Cupertino Design

Setting

자동 임포트 & 자동 저장 설정

1. 기본 코드 작성

1-1. StorePage 클래스 생성 - 내부 Scaffold로 앱 구조화


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(),
    );
  }
}

class StorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
    );
   }
  }

1-2. Column Widget

수직 방향 레이아웃 구조 생성

children 속성 final List<widget> children;

1-3. Row Widget

수평 방향 레이아웃 구조 생성

children 속성

1-4. SafeArea Widget

핸드폰 기기별 StatusBar 영역에 padding 추가

1-5. Debug 배너 해제

debugShowCheckedModeBanner: false


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StorePage(),
    );
  }
}

1-6. Open Flutter Devtools

위젯이 어느 정도의 공간을 차지하는지 확인

1-7. Spacer Widget

위젯 사이 간격 조정


hild: Row(
              children: [
                Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
                Spacer(),
                Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)),
                Spacer(),
                Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)),
                Spacer(),
                Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)),
              ],
            ),

1-8. 앱에서 왼쪽 여백은 16 고정 (업계 표준)


padding: const EdgeInsets.all(16.0)

Image 경로 설정 (pubspec = application.properties)

💡

사용할 resource를 assets로 설정

수정 후 Pub get 클릭 (적용) → 서버 재시작 필수

main에서 경로 설정 시 정상적으로 이미지 업로드


Expanded(child: Image.asset("assets/bag.jpeg")),

최종 Web & App 페이지

💡

Image 위젯을 사용할 때는 fit 속성을 이용

BoxFit.contain 원본사진의 가로 세로 비율 변화 없음

BoxFit.fill 원본사진의 비율을 무시하고 지정한 영역에 사진을 맞춤

BoxFit.cover 원본사진의 가로 세로 비율을 유지한 채로 지정한 영역에 사진을 맞춤 → 장점은 사진의 비율을 유지할 수 있다는 점, 단점은 사진이 지정한 크기를 벗어나면 잘릴 수 있음

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: StorePage(), ); } } class StorePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( ); } }

hild: Row( children: [ Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)), Spacer(), Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)), Spacer(), Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)), Spacer(), Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)), ], ),