2024-03-05

【Flutter】よく出てくる引数のvalueとはなんなのか

valueはウィジェットのプロパティやコンストラクタの一部として使用される。

テキストフィールドやチェックボックスなどの入力ウィジェットでは、ユーザーが入力した値を表示するために "value" プロパティが使われることがあります。

valueを引数として渡し処理

TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Enter your username',
),
onChanged: (value) {
// ここで入力された値を取得し処理する
print('Input value: $value');
},
),

2024-03-05

【Flutter】StatefulWidgetのsetState()の使い方　：状態の更新

Flutter Flutter 基礎

setState()

状態の更新を伝え、build()を呼び出し再描画する様に指示するメソッド

状態が変わって表示を更新する時にはsetState()を呼び出す

【フロー】

setState()の中に状態の変化を書く

↓

そしてそのsetState()を呼び出す関数を作る

void _toggle～(){}等が多い

↓

その関数をボタンのonChanged等から呼び出す

2024-03-05

【Flutter】StatelessWidgetとStatefulWidgetのライフサイクル

Flutter Flutter 基礎

StatelessWidget

その名の通り状態を持たないウィジェット

一度画面を描画するとその後状態が変化しない

固定のテキストやアイコン等

最初の画面構築時にコンストラクタが呼び出されてから一度だけbuild()が呼び出される

StatefulWidget

状態を持つウィジェット

ユーザー操作や時間経過によって状態が変化する

チェックボックスやテキストフィールド等

StatefulWidgetは2つのクラスで構成されている

_のついたクラスのオブジェクトを生成

_のついたクラスで具体的な状態を保持

StatefulWidgetは3つのタイミングでbuild()が呼び出される

最初の画面構築時・親ウィジェットの更新時・状態の更新時

StatefulWidgetのライフサイクル

createState()→initState()→build()

didUpdateWidget()→build()　：親ウィジェットの更新

setState()→build()　：状態の更新

↓

dispose()　：状態の破棄　ウィジェットの消失前に

両者のライフサイクル

参考資料

www.nucleiotechnologies.com

Flutter実践開発 ── iPhone／Android両対応アプリ開発のテクニック

作者:渡部陽太
技術評論社

Amazon

2024-03-05

【Flutter】GoRouterで画面遷移を行う　実装フロー

Flutter GoRouter

pub.dev

Navigator 1・２に代わる簡易的な画面遷移のプラグインとして登場したのがGoRouterです。

GoRouterはコンストラクタで指定するルート（Route）の集合体によって全体が制御され、管理されています。

また、ディープリンクやその他の一般的な画面遷移をすべて使いやすい API でサポートしています。

【実装フロー】

①パッケージを追加

pub.dev

②MaterialAppをMaterialApp.routerに変更

class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
);
}
}

③GoRouterの宣言（ルーティングの宣言・定義）

final GoRouter _router = GoRouter(
routes: <RouteBase>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) {
return const HomeScreen();
},
//　↓をネストにしてサブルート化
routes: <RouteBase>[
GoRoute(
path: 'details',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen();
},
),
],
),
],
);

グローバル変数としてGoRouter()オブジェクトを宣言する
routes:プロパティの中でルーティングを作る　→pathと遷移先のスクリーンウィジェットを変えたルートを作るだけ
最初のルートパスは '/'
name:プロパティも設定できる（ルート名を入れる）
ネストしてサブルートにしないと戻ることができなくなるので注意
最初にinitialLocationやdebugLogDiagonosticsプロパティを設定することもある

④ルートを呼び出す（ページ遷移）

ElevatedButton(
onPressed: () => context.go('/details'),
child: const Text('Go to the Details screen'),

ElevatedButton(
onPressed: () => context.go('/'),
child: const Text('Go back to the Home screen'),
),

ボタンのonPressed等から呼び出す
GoRouter.of(context).go('パス')を省略したのがcontext.go('パス')
パスの代わりにname（ルート名）で呼び出す方が簡単

名前付きルートで呼び出す方法↓

【おまけ】

ページスライドの挙動を変えるpageBuilderプロパティ　GoRouter内で定義

GoRoute(
  path: 'details',
  pageBuilder: (context, state) {
    return CustomTransitionPage(
      key: state.pageKey,
      child: DetailsScreen(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // Change the opacity of the screen using a Curve based on the the animation's
        // value
        return FadeTransition(
          opacity:
              CurveTween(curve: Curves.easeInOutCirc).animate(animation),
          child: child,
        );
      },
    );
  },
),

docs.page

参考資料はこちら

blog.pentagon.tokyo