기본 상태
기본상태입니다.
ctrl + shift + end 로 6번줄 이하의 코드는 삭제합니다.
이후 아래에 stl을 입력하면 StatelessWidget이 생성됩니다.
이하 build에서 return을 통해 그림이 그려지게 됩니다.
실행 시 아래와 같은 상태입니다.
코드를 작성해서 그림을 그려나가겠습니다.
return에서 MaterialApp을 선언해서 안드로이드 요소를 사용한다고 깔아둡니다.
home: Scaffold를 통해
기본적인 Material Design 시각적 레이아웃 구조를 구현합니다.
이 클래스는 서랍과 바닥 시트를 표시하기 위한 API를 제공합니다.
Scaffold의 body에 요소들을 넣게됩니다.
- 코드가 적용되어 Colum으로 Placeholder 3개가 세팅된 모습
Column의 첫번째 자식 위젯을 Row위젯으로 바꾸기
Column의 첫번째 Placeholder를 Row위젯으로 바꿨습니다.
이후 Row위젯의 자식 위젯으로 Text들을 배치했습니다.
- Column의 첫번째 칸에 Row의 위젯들이 배치된 모습
빨간색으로 쳐진 네모박스가
Column의 첫번째 Placeholder였던 공간에
Row 위젯으로 교체
그 안에 Text위젯들이 자리하게 되었습니다.
이제 Row에서 한 곳에 몰려있는 Text위젯들을 띄워보겠습니다.
Row에서 mainAxisAlignment를 사용하여
MainAxisAlignmentd의 spaceBetween / center / end / spaceAround 등이 있는데 이중
spaceBetween을 사용하겠습니다.
- mainAxisAlignment: MainAxisAlignmentd.spaceBetween이 적용된 모습
각자의 Text마다 공간이 띄워진 모습입니다.
Row 위젯 감싸고 설정해보기
이제 Row에 패딩을 적용해보겠습니다.
Row에 Text들을 띄웠던 것처럼 Row안에서 적용하는 방법이 아닙니다.
Row 위젯을 감싸고 공간을 적용시켜야합니다.
Row에다가 커서가 가있는 상태에서 alt + enter를 사용하면
Wrap with widget을 사용하면 간단하게 Row위젯을 감쌀 수 있습니다.
Row위젯이 감싸지면
해당 상태가 됩니다.
widget에 적용할 새로운 Widget을 사용하면 됩니다.
Row 위젯을 Padding 위젯으로 감싼 모습입니다.
⇒ Padding 위젯 안에 Row 위젯이 있는 모습
Padding에서 Row의 padding을 설정하는 코드입니다.
- Padding에서
padding: constEdgeInsets.all(20.0)을 통해 패딩이 설정된 Row의 모습
이미지 적용하기
이미지를 사용하는 위젯은 Image 입니다.
Image.asset( ) 을 사용해서 파일에 저장되어있는 bag.jpeg 를 끌어올 수 있습니다.
이미지를 가져올려면 Pubspec.yaml 에서 설정을 해야합니다.
해당 설명은 Pubspec.yaml 설정하기 페이지에서 설명하겠습니다.
bag 이미지가 적용된 모습입니다. 하지만
크기가 완전히 안전하게 적용된 것은 아닙니다. 창의 사이즈가 달라지면 깨질 가능성이 있습니다.
이 문제점을 수정하겠습니다.
Expanded로 감싼 뒤 ( Row 위젯을 Padding 위젯으로 감싼 방법과 동일)
Image.asset 안에서 fit: BoxFit을 입력하면 위의 속성들이 나타납니다.
속성들 중 cover를 사용하겠습니다.
- 창 크기가 달라져도 이미지의 비율이 안깨지는 모습
완성된 전체 코드
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main(){
runApp(MyApp4());
}
class MyApp4 extends StatelessWidget {
const MyApp4({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Padding(
padding: EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround, // Row 요소 간격 맞춰 주는 것
children: [
Text("Woman"),
Text("Kids"),
Text("Shoes"),
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,)),
],
)
),
),
);
}
}
완성된 전체 모습
Share article