【Flutter入門】４．provider を入れて画面遷移させてみた！

スマホアプリを作って公開するまでの軌跡！第4回

MVVMで実装する方法を調べたら、provider を使うとMVVMのように実装できるとあったので、まずはprovider を使えるようにしたいと思います。

provider をインストールする
画面遷移させてみる
最後に

provider をインストールする

『provider』とは、Flutterにおける状態管理を助けてくれるパッケージです。
状態変化によって画面を切り替えるために使います。

早速インストールしていきます。

プロジェクトのルートディレクトリに “pubspec.yaml” というファイルがありますので、開いてください。

“dependencies”(依存関係)のブロックの中に、下の39行目のように「provider: ^6.0.2」と追記します。

後ろの数字がバージョンを表していて、最新のバージョンは下記で確認できます。

provider | Flutter package

A wrapper around InheritedWidget to make them easier to use and more reusable.

追加したら上書き保存しましょう。VSCodeで作業している場合、自動的に「flutter pub get」が実行されます。

“exit code 0” で終われば完了です。

画面遷移させてみる

さっそく provider を使いながら画面遷移してみます。
と、言っても今回 provider は値を渡すだけですが。

main.dart

ソースコード

  @override
  Widget build(BuildContext context) {
    // return MaterialApp(
    //   title: 'Flutter Demo',
    //   theme: ThemeData(
    //     // This is the theme of your application.
    //     //
    //     // Try running your application with "flutter run". You'll see the
    //     // application has a blue toolbar. Then, without quitting the app, try
    //     // changing the primarySwatch below to Colors.green and then invoke
    //     // "hot reload" (press "r" in the console where you ran "flutter run",
    //     // or simply save your changes to "hot reload" in a Flutter IDE).
    //     // Notice that the counter didn't reset back to zero; the application
    //     // is not restarted.
    //     primarySwatch: Colors.blue,
    //   ),
    //   //home: const MyHomePage(title: 'Flutter Demo Home Page'),
    //   home: HomePage(),
    //   routes: <String, WidgetBuilder>{
    //     '/home': (BuildContext context) => HomePage(),
    //   },
    // );
    return Provider(
      create: (_) => 'HELLO WORLD',
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: HomePage(),
      ),
    );
  }

home.dart

ソースコード

import 'package:flutter/material.dart';
import 'package:flutter_application_1/ui/page_b.dart';
import 'package:provider/provider.dart';

//class HomePage extends StatefulWidget {
class HomePage extends StatelessWidget {
  @override
  // _HomePageState createState() => _HomePageState();
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(context.watch<String>()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => PageB()),
          );
        },
        child: Icon(Icons.navigate_next),
      ),
    );
  }
}

追加ファイル(page_b.dart)

ソースコード

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

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(context.watch<String>() + " B"),
      ),
    );
  }
}