flutter로 중고장터 만들기 backPage.dart

0 - 앞에서 main.dart가 원래는 메인 페이지를 보여주는 역할을 했습니다. 하지만 지금은 main.dart가 route의 역할을 하고 있음으로 backPage을 만들어 메인 페이지를 보여주는 역할을 하게 해줍니다.

 

1. 목표

 

bottomNavigationBar을 사용하여 페이지를 구성합니다.

 

 

2. 구현 내용

backPage.dart

 

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:graduationproject/My_Page.dart';
import 'package:graduationproject/Home.dart';
import 'package:graduationproject/add.dart';

 

기본적인 라이브러리 참조 입니다. My_Page, Home, add가 바텀 바에 이름이 되고 각 페이를 구성하는 페이지가 각 dart 파일이 됩니다.

 

class backPage extends StatefulWidget {
  backPage({Key key, this.user}) : super(key: key);
  static const routeName = "/backPage";
  FirebaseUser user;

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

 StatefulWidget으로 backPage을 만들어 줍니다. 지금 생각하기에는 상태가 변화하면서 구성할 것이 없을 것처럼 느껴지지만 프로젝트가 진행되면서 어떻게 변할지 모르니 미리 StatefulWidget으로 구성해줍니다.(거의 왠만하면 StatefulWidget으로 해주는게 좋은거 같습니다) main.dart에서 봤듯이 backPage에 auth.dart에서 user정보를 넘겨줍니다. 내정보에 사용하기 위함입니다.

 

class _backPageState extends State<backPage> {
//  final FirebaseAuth _auth = FirebaseAuth.instance;
//  final GoogleSignIn _googleSignIn = GoogleSignIn();
  var _pages = [
    Home(),
    Add(),
    My_Page(),
  ];
  var _index = 0; // 패이지 인덱스 0,1,2

  @override
  Widget build(BuildContext context) {
    return main();
  }

 

BottomNavigationBar을 구현하기 위해 먼저 _pages에 배열로 Home(), Add(), My_Page() 클래스를 초기화 해줍니다.

그리고 BottomNavigationBar을 변한것을 알려주기 위해 _index을 선어해줍니다.

 

 Widget main() {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(60),
        child: AppBar(
          backgroundColor: Color(0xFFB2DFDB),
          title: Text(
            'C-STYLE',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontFamily: 'Nanum Gothic',
                fontStyle: FontStyle.normal,
                fontSize: 40,
                color: Color(0xFFF57F17)),
          ),
          centerTitle: true,
        ),
      ),
      body: _pages[_index],
      bottomNavigationBar: BottomNavigationBar(
          onTap: (index) {
            setState(() {
              _index = index;
            });
          },
          currentIndex: _index,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              title: Text('홈'),
              icon: Icon(
                Icons.home,
                color: Color(0xFF7B1FA2),
              ),
            ),
            BottomNavigationBarItem(
                title: Text('중고올리기'),
                icon: Icon(
                  Icons.add,
                  color: Color(0xFFD81B60),
                )),
            BottomNavigationBarItem(
                title: Text('내 정보'),
                icon: Icon(Icons.account_circle, color: Color(0xFF64DD17)))
          ]),
    );
  }
}

 main() Widget으로 코드는 완료가 됩니다. Appbar을 만들어주고 body에 _pages[_index]으로 각 인덱스 번호해 해당되는 _pages배열에 있는 클래스가 body에 보여지게 됩니다. onTap을 통해 BottomNavigationBarItem을 클릭하면 index가 변하고 새로운 _index가 초기화되고 setState()을 통해 그림을 다시 그려줍니다. 밑데 item: <BottomNavigationBarItem>을 통해 각 _index의 아이콘과 이름을 정해줍니다.

 

3. 전제 소스 코드 - backPage.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:graduationproject/My_Page.dart';
import 'package:graduationproject/Home.dart';
import 'package:graduationproject/add.dart';

class backPage extends StatefulWidget {
  backPage({Key key, this.user}) : super(key: key);
  static const routeName = "/backPage";
  FirebaseUser user;

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

class _backPageState extends State<backPage> {
//  final FirebaseAuth _auth = FirebaseAuth.instance;
//  final GoogleSignIn _googleSignIn = GoogleSignIn();
  var _pages = [
    Home(),
    Add(),
    My_Page(),
  ];
  var _index = 0; // 패이지 인덱스 0,1,2

  @override
  Widget build(BuildContext context) {
    return main();
  }

  Widget main() {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(60),
        child: AppBar(
          backgroundColor: Color(0xFFB2DFDB),
          title: Text(
            'C-STYLE',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontFamily: 'Nanum Gothic',
                fontStyle: FontStyle.normal,
                fontSize: 40,
                color: Color(0xFFF57F17)),
          ),
          centerTitle: true,
        ),
      ),
      body: _pages[_index],
      bottomNavigationBar: BottomNavigationBar(
          onTap: (index) {
            setState(() {
              _index = index;
            });
          },
          currentIndex: _index,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              title: Text('홈'),
              icon: Icon(
                Icons.home,
                color: Color(0xFF7B1FA2),
              ),
            ),
            BottomNavigationBarItem(
                title: Text('중고올리기'),
                icon: Icon(
                  Icons.add,
                  color: Color(0xFFD81B60),
                )),
            BottomNavigationBarItem(
                title: Text('내 정보'),
                icon: Icon(Icons.account_circle, color: Color(0xFF64DD17)))
          ]),
    );
  }
}

 

4. 구현된 화면

중요한 것은 밑에 bottomNavigationBar랑 위에 Appbar입니다. 안에 사진은 Home()에서 구현한 모습입니다. 각각 페이지는 다음 게시물에서 구현하도록 하겠습니다.

 

5. 앞으로 구현할 내용

---

Home(), Add(), My_Page()을 구현한다.

---

출처 :

https://flutter.dev/docs

Flutter Documentation

https://fkkmemi.github.io/