home 속성은 앱이 시작할 때 표시할 화면을 지정합니다. 시작할 화면을 바로 코드 넣어도 되지만, 위젯을 사용하여 메인화면을 구성하도록 하겠습니다.
home 메인에 위젯추가
1. 위젯추가 이유
지금까지는 메인화면에 보여질 appBar와 body를 바로 입력했었습니다. 하나의 위젯을 만들어 메인화면에 보여지도록 하겠습니다. 굳이 위젯을 추가하는 이유는
코드의 재사용성
HomePage 위젯을 사용하면 이 위젯을 다른 곳에서도 쉽게 재사용할 수 있습니다. 예를 들어, 다른 화면에서 동일한 레이아웃이나 기능을 사용하고 싶을 때, 위젯을 다시 호출하면 됩니다. 이렇게 하면 중복된 코드를 줄이고, 유지보수성을 높일 수 있습니다.
구조화 및 가독성
위젯을 별도의 클래스로 분리함으로써 코드가 더 구조화되고 가독성이 높아집니다. MyApp 클래스에서 메인 화면을 정의하는 코드가 직접 포함되어 있다면, 코드가 길어져 복잡해질 수 있습니다. 하지만 위젯을 별도로 정의하면, MyApp 클래스는 간단하고 명확하게 유지됩니다.
확장성
별도의 위젯으로 정의하면, 이후에 위젯에 기능을 추가하거나 수정할 때 MyApp 클래스에 영향을 미치지 않고 독립적으로 작업할 수 있습니다. 이는 기능 확장과 유지보수를 용이하게 합니다.
위젯 트리 관리
Flutter에서 화면은 위젯 트리로 구성됩니다. 각 위젯은 자신만의 상태와 자원을 관리할 수 있습니다. HomePage를 하나의 위젯으로 정의하면, 이 위젯에 속한 상태나 자원은 HomePage 내에서 관리되고, 다른 위젯들과 독립적으로 동작할 수 있습니다.
분리된 책임(Single Responsibility Principle)
객체지향 설계 원칙 중 하나인 단일 책임 원칙(Single Responsibility Principle)을 준수할 수 있습니다. MyApp 클래스는 앱의 전반적인 설정과 화면 이동을 담당하고, 위젯 클래스는 실제 화면의 구성을 담당하는 식으로 역할이 분리됩니다. 이는 코드의 명확성을 높이고 유지보수를 쉽게 합니다.
요약하자면, HomePage 위젯을 별도로 정의하여 사용하는 것은 코드의 재사용성과 유지보수성을 높이고, 가독성과 구조화를 개선하며, 확장성을 확보하기 위해서입니다.
2. 위젯추가
class 위젯명 extends StatelessWidget {
const 위젯명 ({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: null,
);
}
}
body에 보여질 화면 코드를 넣으면 됩니다.
3. 숙제코드
Movie Reviews의 search와 list를 넣는 화면을 만들어야 합니다.
위젯명을 MovieListPage로 하겠습니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: MovieListPage(), //MovieListPage 위젯을 보여줍니다.
);
}
}
//MovieListPage 위젯 추가
class MovieListPage extends StatelessWidget {
const MovieListPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
// 지금까지 작업한 내용
appBar: AppBar(
title: Text(
"Movie Reviews",
), //title text
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.person_outline),
) // IconButton
], //action
), //appBar
body: Container(
margin: EdgeInsets.all(10), //상하좌우 10px 여백
child: TextField(
decoration: InputDecoration(
labelText: '영화제목을 검색해주세요.', //labelText
border: OutlineInputBorder(), //외곽선
suffixIcon: Icon(Icons.search), // 돋보기 아이콘
),
), //TextField
), //Container
); Scaffold
}
}
완성된 모습
