Flutter 초보자가 알고 싶은 소기집 ② 네비게이션을 작성하는 방법

소개

Flutter 초보자가 알고 싶은 소기집의 계속입니다.

소기집

Flutter 초보자가 알고 싶은 소기집 ① 위젯 분할
Flutter 초보자가 알고 싶은 소기집 ③ async와 await를 사용한 http 통신
Flutter 초보자가 알고 싶은 소기집 ④ SharedPreferences로 Map을 취급한다

이번은 Flutter의 네비게이션에 대해입니다. 네비게이션의 구현에 대해서는 몇 가지 방법이 있다고 생각합니다만, 이번은 그 중에서도 개인적으로 알기 쉽다고 생각한 이름 기반의 라우팅에 대해 소개합니다.

Navigate with named routes

이쪽의 공식을 참고로 조금 개량해 실장해 갑니다.

네비게이션 구현

프로젝트 만들기

$ flutter create navigation_sample

lib/main.dart 편집

모두 지우고 복사하십시오.

【Code】

// lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'navigation sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('navigation sample'),
        ),
        body: Center(
          child: Text("LET'S START!"),
        ));
  }
}

화면 추가

참고에 따라 하나의 화면을 추가합니다. 그런 다음 홈 화면을 분할합시다.

【Command Line】

$ mkdir lib/screens
$ touch lib/screens/second_screen.dart
$ touch lib/screens/my_home_page.dart

【Code】

// lib/screens/second_screen.dart
import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to first screen when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

// lib/screens/my_home_page.dart
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('navigation sample'),
        ),
        body: Center(
          child: Text("LET'S START!"),
        ),);
  }
}

루트 정의

lib/main.dart 를 다음과 같이 편집합니다. 각 화면을 가져오고 라우팅을 설정합니다. 홈페이지의 화면이 분할되었으므로 삭제하고 있습니다.

【Code】

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:navigation_sample/screens/second_screen.dart';

// 追加
import './screens/my_home_page.dart';
import './screens/second_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'navigation sample',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        // 追加
        initialRoute: '/',
        routes: {
          '/': (ctx) => MyHomePage(),
          '/second': (ctx) => SecondScreen(),
        });
  }
}

전환

전환을 위한 버튼과 처리를 추가합니다.

【Code】

// lib/screens/my_home_page.dart
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('navigation sample'),
        ),
        body: Center(
          // 追加・変更
          child: FlatButton(
            child: Text("GO TO 2nd SCREEN"),
            onPressed: () {
              // 定義した名前に沿って遷移する
              Navigator.pushNamed(context, '/second');
            },
          ),
        ));
  }
}

뒤로

전환된 곳에서 돌아오는 처리를 추가합니다.

【Code】

// lib/screens/second_screen.dart
import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // 追加
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

지금까지 페이지 전환의 구현이 완료되었습니다.

소기

전환하는 처리를 작성할 때
Navigator.pushNamed(context, '/second');
라고 씁니다만 과연 하드 코딩이고, 일일이 라우팅을 어떻게 정의했나요? 라고 보러 가는 것이 번거롭거나 합니다. 따라서 각 화면에 루트 이름을 정의하는 것이 유용합니다.

【Code】

// lib/screens/my_home_page.dart
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  // 追加
  static const routeName = "/";

.
.

// lib/screens/second_screen.dart
import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  // 追加
  static const routeName = "/second";

.
.

그런 다음 라우팅을 다음과 같이 변경합니다.

【Code】

// lib/main.dart

.
.

        // 変更
        initialRoute: MyHomePage.routeName,
        routes: {
          MyHomePage.routeName: (ctx) => MyHomePage(),
          SecondScreen.routeName: (ctx) => SecondScreen(),
        });

.
.

전이하기 위한 루트를 일일이 보러 가지 않아도 끝날 뿐만 아니라 쓰기 실수도 방지할 수 있으므로 좋을까 생각합니다.

【Code】

// lib/screens/my_home_page.dart
import 'package:flutter/material.dart';

// 追加
import './second_screen.dart';

class MyHomePage extends StatelessWidget {
  static const routeName = "/";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('navigation sample'),
        ),
        body: Center(
          child: FlatButton(
            child: Text("GO TO 2nd SCREEN"),
            onPressed: () {
              // before
              // Navigator.pushNamed(context, '/second');

              // after
              Navigator.pushNamed(context, SecondScreen.routeName);
            },
          ),
        ));
  }
}

끝에

이번에는 내비게이션에 대해 소개했습니다. 견고한 쓰는 방법을 살펴보면 살펴볼 정도로 여러가지 재미있네요. 더 좋은 방법이 있다면 알려주세요. 기뻐합니다.

여기까지 읽어 주셔서 감사합니다.