- 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 원본사진의 가로 세로 비율을 유지한 채로 지정한 영역에 사진을 맞춤 → 장점은 사진의 비율을 유지할 수 있다는 점, 단점은 사진이 지정한 크기를 벗어나면 잘릴 수 있음
Share article
