FlutterのInkwellでCardの画像と画面遷移が機能しない

現在、Flutterでアプリを開発中のド素人です。
今現在、グリッドレイアウトにてサマリ的な情報が表示されているCardを配置していき、各Cardをタップするとより詳細な情報が表示されるページを作り込んでいるところです。

そこで、調べながら、InkwellというウィジットにてonTapメソッドを実装すると画面遷移が実装できるとのことだったので、以下のようにコーディングしています。（まずは粗々でも動くことを念頭に置いているので細かい規約的なところはご容赦いただければと思います（勿論、勉強になるのでご指摘いただくのは嬉しいです））

     InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/book_detail');
            },
            child: Card(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  AspectRatio(
                    aspectRatio: 18.0 / 11.0,
                    child: Image.asset(
                        'assets/f_f_object_174_s128_f_object_174_0bg.png.png'),
                  ),
                  Padding(
                    padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text('Title'),
                        SizedBox(height: 8.0),
                        Text('Secondry Text'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

void main() {
  runApp(new MaterialApp(
    home: new MyApp(), // becomes the route named '/'
    routes: <String, WidgetBuilder>{
      '/book_detail': (BuildContext context) => new BookDetail(),
    },
  ));

class BookDetail extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _BookDetailState createState() => new _BookDetailState();
}

class _BookDetailState extends State<BookDetail> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('BookDetail')),
      body: Container(),
    );
  }
}

ここで2つ問題があります。

Inkwell内の画像が表示されない（assetsフォルダ内に画像があること、pubspec.yamlでPackages getが実施済みであることは確認しています）。
画面遷移が機能していない。

恐れ入りますが、どのあたりがまずいのかご指摘いただけないでしょうか。
環境はWindows10＋Android Studioです。
よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

Inkwell内の画像が表示されない（assetsフォルダ内に画像があること、pubspec.yamlでPackages getが実施済みであることは確認しています）。
assets/f_f_object_174_s128_f_object_174_0bg.png.png

画像はパスが間違っていることはないでしょうか。特に拡張子が .png.png となっているのが気になります。
手元ではちゃんと表示されているので、Inkwellによる影響で表示されないことはないと思います。

画面遷移が機能していない。

上記コードを手元で試してみまいたが、ちゃんと遷移しました。
動いた完全なコードを貼っておきますので、やってみてください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme:
          ThemeData(primarySwatch: Colors.blue, backgroundColor: Colors.grey),
      home: MyHomePage(),
      routes: <String, WidgetBuilder>{
        '/book_detail': (BuildContext context) => new BookDetail(),
      },
    );
  }
}

class BookDetail extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _BookDetailState createState() => new _BookDetailState();
}

class _BookDetailState extends State<BookDetail> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('BookDetail')),
      body: Container(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            InkWell(
              onTap: () {
                Navigator.of(context).pushNamed('/book_detail');
              },
              child: Card(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    AspectRatio(
                      aspectRatio: 18.0 / 11.0,
                      child: Image.asset(
                          'assets/f_f_object_174_s128_f_object_174_0bg.png'),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('Title'),
                          SizedBox(height: 8.0),
                          Text('Secondry Text'),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

投稿2020/02/16 22:54

編集2020/02/16 23:07

popobot

総合スコア6586

退会済みユーザー

2020/02/17 12:44

ご回答ありがとうございます。画像についてはおっしゃるとおり、拡張子が重複しておりました。不注意で大変申し訳ございません。画面遷移については、ご回答いただいたとおり、以下の画面遷移に係る実装をmain()からbuildに移したら機能するようになりました。 ``` routes: <String, WidgetBuilder>{ '/book_detail': (BuildContext context) => new BookDetail(), }, ``` とても助かりました。重ねて御礼致します。ただ、なぜそこにかくのか？というところについてはまだわかっておらず、もう少し学習します。

popobot

2020/02/17 18:41 編集

うまくいってよかったです > 画面遷移については、ご回答いただいたとおり、以下の画面遷移に係る実装をmain()からbuildに移したら機能するようになりました。なるほど確かにrunAppの引数に直接、MaterialAppが指定されていたんですね。通常やらないことなので、Flutter側でも正しく動かなかったのかもしれないですね

行動規範の内容に同意します