Flutter実践入門 | サポートサイト/読者コミュニティ

本ページは「Flutter実践入門」のサポートサイト/読者コミュニティです。
https://zenn.dev/kazutxt/books/flutter_practice_introduction

本の感想や誤字/脱字/リンク切れなどがございましたら、ご気軽にコメント頂ければと思います!!

また、最近こんなものが流行っている/こんなテーマが読みたいというものをコメント頂ければ、執筆を検討したいと思います。

テクニカルな部分や掲載ソースコードで再現不可なども対応させて頂きますが、執筆時と前提が変わっていたり、環境が再現できないものもございますので、基本的には書籍内容に対するご支援とさせて頂きます。

細かくて恐縮です。 typoと思われる箇所を見つけてしまったのご報告します。

Chapter 05 チュートリアル編3:HelloWorldと基本構成の プログラムの基本構成 において

途中StateFulWidgetPを継承した

のStateFulWidgetP → StateFulWidget

Dartのアップデートの影響でエラーが出てしまう箇所があったのでお知らせします。

エラー箇所
初級編4:テスト(Unit/Widget/Integration)＞Integrationテスト
https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/beginner_test

解消
Null Safety有効化時のUnit Test
https://qiita.com/nukotsuka/items/66236723bf17c4574608
変数 driver 宣言時にlateをつけると直りました
FlutterDriver driver;
late FlutterDriver driver;

めっちゃお世話になってます！
こちらのローカライズの部分 jp ではなく ja ではないでしょうか？

     supportedLocales: [
       const Locale('jp', ''), //日本語
       const Locale('en', ''), //英語
     ],

https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/intermediate_localization#手順6-アプリでの利用

説明がとてもわかりやすいので、毎日読んで勉強させていただいています
ありがとうございます！

1点、気になった箇所があったのでお知らせします

Chapter 08 チュートリアル編5:Dartの基本にあるメソッドの名前付きパラメタについての説明ですが
method1(param: 1, param2: "data")ではなくmethod1({param1, param2})ではないでしょうか？

名前付きかつデフォルトパラメタにする場合はmethod1({param = 1, param2 = 'data'})のようになると思います！

よろしくお願いします！

勉強させていただいています。ありがとうございます。

Part5-4 IntefitedWidget についてです。

ほぼ重複なので省略しますが、WidgetAとMyInheritedWidgetのString messageをint counterに変更

ということでしたので、String message → int counterと修正して動かしてみたところ、以下のエラーとなりました。

WidgetAのbuild()の

MyInheritedWidget _myInheritedWidget = MyInheritedWidget.of(context);

で

static MyInheritedWidget of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>() as MyInheritedWidget;
// type 'Null' is not a subtype of type  'MyInheritedWidget' in type cast

と、ツリーの親にMyInheritedWidgetがいないため？Nullになっているのだと思いますが、
具体的にどう修正すると値を変えない例となるのかがわからず。。。助言いただけるとありがたいです。

IoT系のハードを作ることが多いのですが、BLEでスマホと連携することが多く、最近Flutterを使っています。
基本的なところから、まとめていただいる、kazutxtさんのFlutter実践入門、大変わかりやすく参考させていただきました。
ありがとうございます。

一点、細かいですがソースとキャプチャーの相違を見つけましたので、お知らせします。
Chapter 12＞01.画面の構築＞Step1.文字を表示させる
この箇所、ソースと画面キャプチャーが違ってませんでしょうか。
ソースでは以下のようにHelloWorldになっていますが
~body: Text("HelloWorld"),
画面キャプチャーでは「初めてのテキスト」となっております。
ご確認いただけれと思います。

いつも勉強になっております、執筆ありがとうございます。

大変恐縮ではございますが、Bluetoothを使用した内容について今後追加の予定はありますでしょうか？

初学者ですが，自前スマホアプリ作成にあたり，当該書籍が大変役立っており感謝しています！

恐縮ではございますが，個人的に写経／実行していてエラーで躓いたところについて共有させていただきます．
必要に応じて，以下，加筆修正いただければ幸いです．

【バージョン情報】
Flutter 3.3.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 52b3dc25f6 (13 days ago) • 2022-11-09 12:09:26 +0800
Engine • revision 857bd6b74c
Tools • Dart 2.18.4 • DevTools 2.15.0

【該当ページ】
Chapter 34 06.MachineLearning https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/34_chapter4_ml

【症状】
当該ページのコードや設定をコピペし，Android にて画像認識は問題なく実行できたのですが，OCR を実行しようしたところエラーで強制終了しました．

【自己解決した方法】
実装例の lib/main.dart について，

final textRecognizer = TextRecognizer(script: TextRecognitionScript.japanese);

とあり日本語を指定していますが，android/app/build.gradle (IOS は ios/Podfile) について，

android {
    ...略...
    dependencies {
        implementation 'com.google.mlkit:text-recognition-japanese:16.0.0-beta5'
    }
    ...略...
}

という風に dependencies を追加することで解決しました．
これの解決に当たり，公式ドキュメント https://pub.dev/packages/google_mlkit_text_recognition を参照いたしました．

勉強させていただいています。ありがとうございます。
Youtube, Udemy, web検索などでFlutterのサンプルコードを探すのですが、
最新バージョンにちゃんと追従できているものは非常に少なく、この本は非常にありがたいです。

さて、気づいた点をご連絡します。

04.TTS（文字の音声化）
において、
lib/main.dart
の先頭でgeolocater をimport　しています。
これは
import 'package:flutter_tts/flutter_tts.dart';
ですね。コピペの修正漏れかなと思いますが、上記修正で動作確認しました。
よろしくお願いします。

Flutter 初学者ですが大変参考にさせていただきました。ありがとうございます。一点、違和感を感じたところを共有させていただきます。

【対象ページ】
Chapter 7, 04. Riverpod

【内容】
HookConsumerWidget で書き換えている部分について、「Consumer を使わずに buildメソッドでrefが使えるようにする」だけであれば hooks_riverpod は不要で、flutter_riverpod の ConsumerWidget で書き換えることができます。コメントの最後に書き換えたコードを貼っておきます。

hooks_riverpod の HookConsumerWidget は flutter_hook ( useState) と Riverpod ( ref ) を両方同じ Widget で利用したい場合に選択するものと解釈しており、(flutter_hook の) useState によってサンプルがより簡潔に書けるという解説は Riverpod の解説からはそれてしまっているように感じました。

import 'package:flutter/material.dart';
import 'package:riverpod/riverpod.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';


final _mydataProvider = StateNotifierProvider<MyData, double>((ref) => MyData());

void main() => runApp(ProviderScope(child: MyApp()));


class MyData extends StateNotifier<double> {
  MyData() : super(0.5);
  void changeState(state) => this.state = state;
}


class MyApp extends StatelessWidget {
  const MyApp({ super.key });

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: "Riverpod Demo"),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}


class MyHomePage extends ConsumerWidget {
  final String title;

  const MyHomePage({ super.key, required this.title });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    double slidevalue = ref.watch(_mydataProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            slidevalue.toStringAsFixed(2),
            style: const TextStyle(fontSize: 100),
          ),
          Slider(
            value: slidevalue,
            onChanged: (value) {
              ref.read(_mydataProvider.notifier).changeState(value);
          }),
        ],
      ),
    );
  }
}