[플러터]스토어 앱 화면 만들기

위젯

• Dart에서 위젯은 Flutter 프레임워크에서 중요한 개념

• Flutter는 위젯을 사용하여 사용자 인터페이스를 구축

• 레이아웃, 스타일, 애니메이션등을 정의하는데 사용

• 기본 위젯
• Text : 문자열을 화면에 표시
• Column : 수직으로 위젯을 나열
• Row : 수평으로 위젯을 나열
• Container : 레이아웃, 마진, 패딩 등을 설정

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(
        body: SafeArea(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("woman"),
                  // Spacer(),
                    Text("Kids"),
                  //  Spacer(),
                    Text("Shoes"),
                  // Spacer(),
                    Text("Bag"),
                  ],
                ),
              ),
              Expanded(
                  child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)),
              SizedBox(height: 2),
              Expanded(
                  child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)),
            ],
          ),
        ),
      ),
    );
  }
}

• MaterialApp
• 애플리케이션의 루트 위젯으로, 앱의 전반적인 테마와 네비게이션을 관리(ios는 쿠퍼티노 사용)

• Scaffold
• 기본적인 화면 레이아웃 구조를 제공하는 위젯
• 앱바, 바디, 플로팅 액션 버튼을 포함 가능

• SafeArea
• 화면의 안전 영역 내에 위젯을 배치하여 ,상단 상태 바와 하단 네비게이션 바에 의해 콘텐츠가 가려지지 않도록 설정

• Column
• 수직 방향으로 자식 위젯을 배치

• Padding
• 자식 위젯 주위에 여백을 추가

• Row
• 수평 방향으로 자식 위젯을 배치
• mainAxisAlignment: MainAxisAlignment.spaceBetween을 사용하여 자식 위젯 간에 균일한 간격을 추가

• Text
• 텍스트를 화면에 표시

• Expanded
• 자식 위젯을 가능한 공간을 최대한 활용하여 확장

• Image.asset
• 로컬 파일 시스템에서 이미지를 로드하여 표시

• SizeBox
• 고정된 크기의 빈 공간을 추가

실행 화면