Zenn
📱

flutter go_routerサンプルを動かす。 SDKを更新する。

2022/10/04に公開
Flutter
Android Studio
Dart
tech

みなさんこんにちは

今日のお題

flutter の　go_routerを動かしてみたかったのですが、Version連携がうまくできなかったので改修しました。

動かしたいgo_routerのサンプル

https://pub.dev/packages/go_router/example

サンプルソース

そのままだと面白くないので、class単位でファイル分割しようと思います。
以下にソースを格納しておきます。
https://github.com/kurayasuyu/goroutersample

例によってファイル構成

いつもファイル構成でつまづくので。

main.dart

ソースの以下の部分でエラーが出ました。（Flutter SDKのVersionを上げたらエラーは消えました。）
調べたところ、routerConfigが対応していなかったり、MaterialApp.routerの最低限必要なパラメタが違うようです。

error
  Widget build(BuildContext context) => MaterialApp.router(
    routerConfig: _router,
    title: title,
  );

動いたソース。公式のソースに間違いはありませんでした。私の環境が不味かったのです。

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

import 'page/page1/page1.dart';
import 'page/page2/page2.dart';

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

/// The main app.
class MyApp extends StatelessWidget {
  /// Creates an [App].
  MyApp({Key? key}) : super(key: key);

  /// The title of the app.
  static const String title = 'GoRouter Example: Declarative Routes';

  @override
  Widget build(BuildContext context) => MaterialApp.router(
    routerConfig: _router,
    title: title,
  );

  final GoRouter _router = GoRouter(
    routes: <GoRoute>[
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) =>
        const Page1Screen(),
        routes: <GoRoute>[
          GoRoute(
            path: 'page2',
            builder: (BuildContext context, GoRouterState state) =>
            const Page2Screen(),
          ),
        ],
      ),
    ],
  );
}

page1.dart

最初に表示されるページ１枚目

page1.dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:gorouter/main.dart';

class Page1Screen extends StatelessWidget {
  /// Creates a [Page1Screen].
  const Page1Screen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text(MyApp.title)),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () => context.go('/page2'),
            child: const Text('Go to page 2'),
          ),
        ],
      ),
    ),
  );
}

page2.dart

ページ１から切り替えられる２ページ目

page2.dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:gorouter/main.dart';

class Page2Screen extends StatelessWidget {
  /// Creates a [Page2Screen].
  const Page2Screen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text(MyApp.title)),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () => context.go('/'),
            child: const Text('Go back to home page'),
          ),
        ],
      ),
    ),
  );
}

問題のエラー

以下のエラーが、AndroidStudioのコンソールに表示されます。

Resolving dependencies...
The current Flutter SDK version is 3.0.5.

Because gorouter depends on go_router >=5.0.0 which requires Flutter SDK version >=3.3.0, version solving failed.
pub finished with exit code 1
Process finished with exit code 1

どうやら、go_router 3.3.0を利用したい場合は、Flutter SDK 3.0.5では問題があるようです。

FlutterSDKのVersionを確認します。

確認コマンドは、もちろん

% flutter doctor

% flutter doctor                    
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.6 21G115 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

FlutterSDKのVersionをUpdate

以下のコマンドを入力してアップデートします。

% flutter upgrade

% flutter upgrade
Upgrading Flutter to 3.3.3 from 3.0.5 in /Users/satoatushi/development/flutter...
Downloading Darwin arm64 Dart SDK from Flutter engine 5c984c26ebc4a0a8897305d3c6bef70ced91090d...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed

  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  4  185M    4 9038k    0     0  7538k      0  0:00:25  0:00:01  0:00:24 7563k
 31  185M   31 58.9M    0     0  26.8M      0  0:00:06  0:00:02  0:00:04 26.9M
 56  185M   56  105M    0     0  32.9M      0  0:00:05  0:00:03  0:00:02 32.9M
 77  185M   77  143M    0     0  33.8M      0  0:00:05  0:00:04  0:00:01 33.9M
 97  185M   97  180M    0     0  34.2M      0  0:00:05  0:00:05 --:--:-- 35.7M
100  185M  100  185M    0     0  34.5M      0  0:00:05  0:00:05 --:--:-- 42.2M
Building flutter tool...

Upgrading engine...
Downloading android-arm-profile/darwin-x64 tools...                508ms
Downloading android-arm-release/darwin-x64 tools...                147ms
...
Downloading darwin-x64-release/gen_snapshot tools...               215ms
Downloading darwin-x64/font-subset tools...                        287ms

Flutter 3.3.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 18a827f393 (6 days ago) • 2022-09-28 10:03:14 -0700
Engine • revision 5c984c26eb
Tools • Dart 2.18.2 • DevTools 2.15.0

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.3, on macOS 12.6 21G115 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

Flutter SDK 3.3.3になったようです。

コンパイルして、試運転

ボタンを押すことで、行ったり来たり切り替え可能です。

今日の課題

ログイン画面を作りたかったのですが、画面遷移のプラグイン迷っていたら思った以上に時間がかかったので、私には時間と資金が必要ですね。

今後の予定

ログイン認証して、通ったら秘密の画面が表示されるようにしたい。

Discussion