Flutter画像の表示(ビギナー向け短文)

Flutterで画像を表示する方法

Flutterビギナー向け、かつメモ程度のものとしてお読みください！
ちなみにAndroid Studioで書いてます。

まずはpubspec.yamlに使用したい画像を格納するディレクトリを指定する

pubspec.yaml

(省略)
dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0
  build_runner: ^2.3.2
  freezed: ^2.2.1
  json_serializable: ^6.5.4

flutter:
  uses-material-design: true
  // ここ！
  assets:
    - assets/image/

ちなみに勝手にアプリのルートディレクトリまでのパスはくっつけてくれるっぽいので、ここでは、ルートディレクトリよりも下のパスだけ入れればOK

ディレクトリ構造(比較にlibディレクトリだけ記載して、残りは省略) ↓

root
-assets
  - image
    - ここに画像を配置していく(あくまで例なので、お好きな場所へどぞ！)
-lib
  - main.dart

あとはWidgetで画像を呼び出してあげれば、表示できる(HookとかWidgetRefは初心者の方は気にしないでください)

class TopPage extends HookConsumerWidget {
  const TopPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        // ここ↓
        title: Image.asset('assets/image/logo.png'),
        backgroundColor: Colors.white,
      ),
    );
  }
}

以上！！！！！！！！