1. 프로젝트 세팅
2.MyApp클래스에 밑에 부분지우고 alt + enter 로 override
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(),
);
}
}
MaterialApp 과 쿠퍼티노앱 2가 있다.
MaterialApp == 안드로이드
쿠퍼티노앱 == ios
그리고 뼈대를 제공하는 Scaffold를 사용해서
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Woman"),
Text("Woman"),
Text("Woman"),
Text("Woman"),
],
),
],
),
),
);
}
}
왼쪽 오른쪽 16
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Woman",style: TextStyle(fontSize: 16)),
Text("Kids",style: TextStyle(fontSize: 16)),
Text("Shoes",style: TextStyle(fontSize: 16)),
Text("Bag",style: TextStyle(fontSize: 16)),
],
),
),
],
)),
),
);
}
}
Placeholder
Placeholder로 위치잡기
화면 높이를 초과하는 문제나 디바이스에서 경고 메시지가 발생
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Woman",style: TextStyle(fontSize: 16)),
Text("Kids",style: TextStyle(fontSize: 16)),
Text("Shoes",style: TextStyle(fontSize: 16)),
Text("Bag",style: TextStyle(fontSize: 16)),
],
),
),
SizedBox(child: Placeholder()),
SizedBox(child: Placeholder()),
SizedBox(child: Placeholder()),
SizedBox(child: Placeholder()),
],
)),
),
);
}
}
SizedBox 위젯을 사용할 때, 높이와 넓이를 명시적으로 지정하지 않으면 SizedBox는 0 크기로 설정되어야 합니다. 하지만 Placeholder 가 기본적으로 가로 400, 세로 400의 크기를 가지고 있기에 SizedBox가 별도의 크기를 명시하지 않더라도, 그 안에 있는 Placeholder가 자동으로 400x400 크기로 렌더링된다.1. 첫번쨰 방법 SizedBox 에 넓이와 높이를 주기
SizedBox(width: 100,height:20,child: Placeholder()),
SizedBox(width: 100,height:20,child: Placeholder()),
SizedBox(width: 100,height:20,child: Placeholder()),
SizedBox(width: 100,height:20,child: Placeholder()),
극단적으로 높이를 줬는데
Placeholder 가 SizedBox 의 넓이와 높이를 따라가는것을 확인할 수 있다.이렇게 하나하나 해도 되지만
2.두번째 방법
사진 asset 등록하기
yml 2줄 띄워서 하기
pub get 적용하기
yml파일을 바꾸면 서버를 껏다가 켜야 적용된다.
사진등록하기
이미지 비율은 cover
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0), // 이름있는 생성자
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Woman", style: TextStyle(fontSize: 16)),
Text("Kids", style: TextStyle(fontSize: 16)),
Text("Shoes", style: TextStyle(fontSize: 16)),
Text("Bag", style: TextStyle(fontSize: 16)),
],
),
),
Expanded(
child: Image.asset(
"assets/bag.jpeg",
fit: BoxFit.cover,
)),
SizedBox(height: 10),
Expanded(
child: Image.asset(
"assets/cloth.jpeg",
fit: BoxFit.cover,
)),
],
),
),
);
}
}
완성
Share article