스토어 앱 만들기

gov's avatar
Dec 23, 2024
스토어 앱 만들기
💡
Column 수직 방향 레이아웃 구조
Row 위젯 - 수평 방향 레이아웃 구조
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(), // 1:1 비율 간격생성 Text("Kids"), // Spacer(), Text("Shoes"), // Spacer(), Text("Bag"), ], ), ), // Expanded 위젯 - 남은 위젯의 공간을 확장하여 빈 공간을 채움 // wrap whit widget 위젯 감싸기 -> Expanded 감싸기 Expanded(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)), SizedBox(height: 2), // 이미지 사이 여백 Expanded(child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)), ], ), ), ), ); } }
  • pubspec.yaml 이미지 파일 인식을 위해 자원 폴더 위치 설정
    • assets: - assets/
Expanded 적용 전
Expanded 적용 전
최종 코드 완성 앱
최종 코드 완성 앱
 
Share article

goho