Flutter 프로젝트 시작하기 - 페이지 이동

저번 포스팅에서는 프로젝트 세팅을 했는데 일단 거지같은 모양새다.

 

밑에 푸터도 주고 위에 헤더도 설정해보자

 

1. layout 나누기

header / body / footer 영역을 나눠보자.

우선 home : Scaffold 설정을 하고 appBar / body / bottomNavigationBar 로 나누면 된다

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 MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.white,
              title: SizedBox(
                height: 40,
                child: TextField(
                  decoration: InputDecoration(
                      hintText: '검색어를 입력하세요', //힌트 텍스트
                      filled: false, //배경색 활성화
                      fillColor: Colors.white,
                      suffixIcon: const Icon(Icons.search, color: Colors.grey),
                      enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                          borderSide: const BorderSide(color: Colors.grey, width: 1)
                      ),
                      focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                          borderSide: const BorderSide(color: Colors.grey, width: 1)
                      ),
                      contentPadding: const EdgeInsets.only(left: 15, right: 10)
                  ),
                ),
              ),
            ),
            body: Container(
              width: 150, height: 50, color: Colors.black,
              margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
            ),
            bottomNavigationBar: const BottomAppBar(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(Icons.star),
                      Icon(Icons.confirmation_num_sharp),
                      Icon(Icons.co2_outlined)]
                )
            )
        )
    );

  }
}

 

 

대충이렇게하면 뭔가 많이본 모양이 나오긴 한다

input 필드를 생성하고 그 안에 hint 와 suffix icon 돋보기 이미지를 설정하였다

 

하지만 상단의 시간쪽이랑 로고도 넣으면 좋을것같다.

 

2. Header 꾸미기

appBar 에 leading 속성을 추가해서 로고 이미지를 넣어보자.

 

이미지를 넣으려면 pubspec.yaml 에 이미지 root 설정을 해야한다.

assets 설정을 추가하자

...

flutter:
  assets:       # <- 여기 추가
    - assets/    # <- 여기 추가
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  ....

 

그리고 인텔리제이기준 우측상단에 pub get, pub upgrade를 한번씩 눌러주자

 

그리고 재실행해주면 이제뭔가 앱같긴 하다.

 

상단에 회색영역도 지워보자

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  // 상태 바 배경 색상 변경 (흰색으로 설정)
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.white, // 상태 바 색상을 흰색으로 설정
    statusBarIconBrightness: Brightness.dark, // 상태 바 아이콘을 어두운 색으로 설정 (흰색 배경에 어울리도록)
  ));

  runApp(const MyApp());
}

 

이렇게까지하면 헤더는 정리된 느낌 근데 폰트가 맘에안든다.

 

국룰폰트 Noto Sans Kr 을 넣어보자

 

3. 폰트 추가

https://fonts.google.com/noto/specimen/Noto+Sans+KR

Noto Sans Korean - Google Fonts

 

여기서 get Font -> Download All

해서 모든 ttf 파일을 다운로드하고 프로젝트의 root 경로에 fonts 폴더생성 후 모두 집어넣는다

 

이걸이제 어케쓰냐면, pubspec 에 선언하고 사용하면 된다

pubspec 하단에 example이 나와있긴한데, 만드려면 복잡시러우니까 그냥 밑에 복사해서 쓰자

 

헷깔릴까봐 flutter 부터 복사해봄

flutter:
  assets:
    - assets/

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  fonts:
    - family: NotoSansKR
      fonts:
        - asset: fonts/NotoSansKR-Thin.ttf
          weight: 100
        - asset: fonts/NotoSansKR-ExtraLight.ttf
          weight: 200
        - asset: fonts/NotoSansKR-Light.ttf
          weight: 300
        - asset: fonts/NotoSansKR-Regular.ttf
          weight: 400
        - asset: fonts/NotoSansKR-Medium.ttf
          weight: 500
        - asset: fonts/NotoSansKR-SemiBold.ttf
          weight: 600
        - asset: fonts/NotoSansKR-Bold.ttf
          weight: 700
        - asset: fonts/NotoSansKR-ExtraBold.ttf
          weight: 800
        - asset: fonts/NotoSansKR-Black.ttf
          weight: 900

 

그리고 main.dart 에서 hoem 상단에 theme 을 추가하자

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        theme: ThemeData( //추가
            fontFamily: 'NotoSansKR'
        ),
        home: Scaffold(
        ...생략

 

 

4. Footer 추가

푸터를 추가한다는것은 클릭할때마다 페이지가 바뀌면 좋겠기 때문이다.

flutter 페이지 이동방식에는 두가지가 있다.

 

header, footer 를 유지하지않고 전체페이지가 바뀌는방식과 header,footer를 고정시키고 body 만 바뀌는 방식이 있는데, 이번엔 body 만 바꿔보겠다.

 

푸터에 탭을 3개둔다고 가정하고 이동할 페이지를 3개 더 생성해보자

 

main.dart는 페이지변경을 관장하는곳으로 인식하고 나머지페이지는 이동할 대상이다.

나는 달력을 넣을것이기때문에 home, calendar, mypage 이렇게 3개로 만들어봤다.

 

home.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('홈 화면'),
      ),
    );
  }
}

 

calendar.dart

import 'package:flutter/cupertino.dart';

class CalendarScreen extends StatelessWidget {
  const CalendarScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('달력 화면'),
    );
  }
}

 

mypage.dart

import 'package:flutter/material.dart';

class MyPageScreen extends StatelessWidget {
  const MyPageScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('여기는 마이페이지 화면입니다!'),
      ),
    );
  }
}

 

이렇게 3개를 만들었으면 이제 main.dart에 이어보자

 

MyApp build 부분을 이렇게 간단하게 바꿔놓는다

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'NotoSansKR'),
      home: MainScreen(), // MainScreen이 앱의 첫 화면이 됨
    );
  }
}

 

그리고 MainScreen 을 정의해준다.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'NotoSansKR'),
      home: MainScreen(), // MainScreen이 앱의 첫 화면이 됨
    );
  }
}

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  _MainScreenState createState() => _MainScreenState();
}

 

이제 MainScreen State 에 들어갈 요소들을 넣어주자

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'NotoSansKR'),
      home: MainScreen(), // MainScreen이 앱의 첫 화면이 됨
    );
  }
}

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selectedIndex = 0;

  static final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(), //import 필요 
    CalendarScreen(),  //import 필요
    MyPageScreen(),  //import 필요
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Header(),
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '홈',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            label: '달력',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '마이페이지',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

 

요로코롬하면 탭 클릭 시 페이지 변경 완료