flutter로 중고장터 만들기 main.dart 수정(route 사용)

0 - 기본적으로 앞의 글과 이어지며 main.dart을 수정합니다.

1. 목표

 

main.dart을 수정합니다.

route을 사용해 페이지 이동하는 역할만 할 수 있도록 만듭니다.

 

 

2. 구현 내용

main.dart

import 'package:flutter/material.dart';
import 'package:graduationproject/add.dart';
import 'package:graduationproject/My_Page.dart';
import 'package:graduationproject/splash.dart';
import 'package:graduationproject/backPage.dart';
import 'package:graduationproject/Home.dart';
import 'package:graduationproject/auth.dart';
import 'Sing_in_up.dart';

일단 모든 파일을 import 해줍니다. 그래야 main에서 페이지 변환 역할을 해줄 수 있습니다.

 

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      //우측 상단 debug 제거
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.black,
      ),
      initialRoute: SplashPage.routeName,

      //라우터로 인한 화면 이동
      routes: {
        SplashPage.routeName: (context) => SplashPage(),
        Add.routeName: (context) => Add(),
        Home.routeName: (context) => Home(),
        AuthPage.routeName: (context) => AuthPage(),
        My_Page.routeName: (context) => My_Page(),
        Sign_in_up.routeName: (context) => Sign_in_up(),

      },

main.dart에 있어야하는 MaterialApp에는 필요한 정보를 넣어주고 routes : {} 안에 각 페이지.routeName: (contex) => 클래스 이름 형태로 넣어주면 끝난다. 이렇게 하면 './지정한 경로 이름' 으로 바로 페이지 이동이 가능하다. initialRoute는 SplashPage.routeName으로 가장 먼저 가는 페이지를 의미한다. 가장먼저 SplashPage로 이동하게 된다. 경로 이름 지정은 다음과 같이 한다. 

 

splash.dart

class SplashPage extends StatefulWidget {
  SplashPage({Key key}) : super(key : key);
  static const routeName = '/splash';

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

splash.dart의 예이다. static const routName = './splash';을 선언해 주면 /.splash만 해주면 페이지가 이동하게 된다. 경로 이동은 main.dart가 집합적으로 일하게 되고 나머지 페이지에서는 페이지 이동에 신경을 쓰지 않아도 된다. 

 

main.dart

      onGenerateRoute: (settings) {
        //backPage로 이동하는 라우터 명령을 수행할 경우
        if (settings.name == backPage.routeName) {
          //args에 backPage로 전달할 데이터가 들어간다.
          final backPage args = settings.arguments;

          return MaterialPageRoute(
            builder: (context) {
              return backPage(user: args.user);
            },
          );
        }
      },

 페이지 끼리 데이터를 공유해야할 때가 있다. 이때 onGenerateRoute을 사용하는 방법이 있고 provider을 사용하는 방법이 있는데 먼저 onGenerateRoute을 사용해 보겠다. flutter doc 에서 참고해서 내 코드에 적용했다. settings.name이 backPage.routeName일 때 즉 './backPage'을 사용했을 때 backPage에 전달할 arguments을 args에 넣어주고 backPage에 보내준다. 그리고 backPage로 페이지를 이동할 때 args만 넣어주면 된다. 다음이 그 예이다.

 

 Navigator.pushReplacementNamed(context, '/backPage', arguments: backPage(user : _firebaseUser));

 

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

import 'package:flutter/material.dart';
import 'package:graduationproject/add.dart';
import 'package:graduationproject/My_Page.dart';
import 'package:graduationproject/splash.dart';
import 'package:graduationproject/backPage.dart';
import 'package:graduationproject/Home.dart';
import 'package:graduationproject/auth.dart';
import 'Sing_in_up.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      //우측 상단 debug 제거
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.black,
      ),
      initialRoute: SplashPage.routeName,

      //라우터로 인한 화면 이동
      routes: {
        SplashPage.routeName: (context) => SplashPage(),
        Add.routeName: (context) => Add(),
        Home.routeName: (context) => Home(),
        AuthPage.routeName: (context) => AuthPage(),
        My_Page.routeName: (context) => My_Page(),
        Sign_in_up.routeName: (context) => Sign_in_up(),

      },

      onGenerateRoute: (settings) {
        //backPage로 이동하는 라우터 명령을 수행할 경우
        if (settings.name == backPage.routeName) {
          //args에 backPage로 전달할 데이터가 들어간다.
          final backPage args = settings.arguments;

          return MaterialPageRoute(
            builder: (context) {
              return backPage(user: args.user);
            },
          );
        }
      },
    );
  }
}

 

4. 앞으로 구현할 내용

 

provider을 사용한 회원가입 로그인 페이지를 구현합니다.

회원가입 로그인 UI를 만듭니다.

 

출처 :

https://flutter.dev/docs

Flutter Documentation

https://fkkmemi.github.io/

memi’s startup