간단한 레이아웃 구조 살펴보기
HomeScreen 은 미리 작성해놓아서 어플을 실행하면 바로 이 화면이 나오게 된다.
이 홈 화면의 구조를 간단하게 살펴보면,
-
가장 크게 'Scaffold' 가 AppBar 영역까지 차지하고 있고, 그 안으로 AppBar, body 가 구조를 이룬다.
-
각각의 구조 AppBar, body 안의 요소들이 또 구조를 이룬다.
-
AppBar의 title은 Text 속성으로 '고양이 이름 맞추기' 를 띄워주었다.
-
body 안에는 크게 세 뭉텅이가 있는데,
- img
- text
- button
- 이 세 뭉텅이들은 각각 속성이 있고, 속성은 위젯으로 줄 수 있다. 예를 들어
Center(
child: Image.asset(
'images/quiz.jpg',
width: width * 0.8,
),
),
Padding(
padding: EdgeInsets.all(width * 0.024),이건 이미지에 대한 코드인데, Center 위젯을 불러와 Center 위젯의 child인 Image 를 가운데로 배치했고, Padding 위젯 또한 적용하여 패딩(EdgeInsets.all 은 모든 면에 패딩을 먹인다는 뜻.) 을 먹인 걸 확인할 수 있다.
다른 text, button 또한 이런 식으로 불러오고, Center 안에 자식요소로 넣어 위젯을 적용해 다양한 속성을 먹인다.
이 화면의 구조를 간단하게 정리해보면
이런식의 구조를 갖고 있다고 보면 된다.
그림을 보면 알겠지만 , body 전체를 Column 이라는 위젯으로 묶어주었기 때문에 body 안에 들어가는 모든 요소는 아래로 쌓인다. (옆으로 쌓고 싶으면 Column 대신 Raw 위젯을 사용하면 끝)
[이틀동안 플러터만 하고 느낀점]
플러터의 좋은 점은 위젯을 그냥 불러다가 쓰기 때문에 웹에서 css 를 사용해 블록 설정을 풀고 먹이고, flex를 쓰고 안 쓰고 하면서 레이아웃을 잡을 때 했던 귀찮음+고생 없이
위젯으로 간단하게 레이아웃 구조를 잡을 수 있다
는 점인 것 같다.
안 좋은 점은 진입장벽은 낮지만, 파고 들어갈수록 어렵다는 점이다.
특히 state에 관해 알아보았을 때는 정말 어려웠다. 그래서 플러터는 나처럼 어플 만드는 게 궁금한데 전문지식은 부족한 사람이 잠깐 입문으로 레이아웃 잡는 것을 알아보기에 좋은 것 같다.
아래에 전체 코드를 첨부했다.
class _HomeScreenState extends State<HomeScreen> {
Widget build(BuildContext context) {
// 해당 기기의 여러 상태정보를 알 수 있다.
Size screenSize = MediaQuery.of(context).size;
// 너비와 높이가 고정값이 아닌 상대수치. flex 쓰는 거라고
//생각하면 됨 .
double width = screenSize.width;
double height = screenSize.height;
//SafeArea : 안전한 영역을 잡아주는 위젯(상 하단 영역 침범 x)
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('고양이 이름 맞추기'),
backgroundColor: Colors.deepPurple[200],
// 앱 바 좌측 버튼 삭제 (컨테이너 안에 아무것도 없음)
leading: Container(),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Center(
child: Image.asset(
'images/quiz.jpg',
width: width * 0.8,
),
),
Padding(
padding: EdgeInsets.all(width * 0.024),
),
Text(
'플러터 퀴즈 앱',
style: TextStyle(
fontSize: width * 0.065,
fontWeight: FontWeight.bold,
),
),
Text(
'퀴즈를 풀기 전 안내사항입니다. \n 꼼꼼히 읽고 퀴즈 풀기를 눌러주세요.',
textAlign: TextAlign.center,
),
Padding(
padding: EdgeInsets.all(width * 0.048),
),
_buildStep(width, '1. 퀴즈 3개를 풀어보세요.'),
_buildStep(width, '2. 잘 읽고 문제를 푼 뒤 \n 다음 버튼을 누르세요.'),
_buildStep(width, '3. 옹이 봄이 문제니까 잘 풀어야 합니다.'),
Padding(
padding: EdgeInsets.all(width * 0.048),
),
Container(
padding: EdgeInsets.only(bottom: width * 0.036),
child: Center(
child: ButtonTheme(
minWidth: width * 0.8,
height: height * 0.05,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: RaisedButton(
child: Text(
'지금 퀴즈 풀기',
style: TextStyle(color: Colors.white),
),
color: Colors.deepPurple[200],
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => QuizScreen(
quizs: quizs,
),
),
);
},
),
),
),
)
],
),
),
);
}
