flutter_hooks/useContext関数
flutter_hooks/useContext関数（詳細は、pub.dev 参照）についての説明です。
Flutter の BuildContext にアクセスするために使用されます。
通常、BuildContext はウィジェットツリー内でデータを受け渡したり、特定のデータに依存するフックを使用する場合に非常に重要です。
１．useContext の概要
useContext フックは、そのフックが呼び出されているウィジェットの BuildContext を取得するために使用されます。これは特に、そのコンテキストを必要とする他のフックや機能内で使用されることが多いです。
Dart
BuildContext context = useContext();２．使用例
Flutterで画面遷移を行い、useContext で取得したデータを次の画面で使用する、という使用例です。
（main.dart（エントリーポイント））
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:test05/widgets/usecontext_hooks_example.dart';
void main() {
runApp(
const ProviderScope(
child: MaterialApp(
home: UseContextHooksExample()
)
)
);
}（usecontext_hooks_example.dart（遷移元の画面））ここでcontext を取得する：
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:test05/widgets/theme_display_Page.dart';
class UseContextHooksExample extends HookWidget {
const UseContextHooksExample({super.key});
@override
Widget build(BuildContext context) {
//useContextを使用してテーマデータにアクセス
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Use Context Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Using Theme Color',
style: TextStyle(color: theme.shadowColor),
),
ElevatedButton(
onPressed: () {
//画面遷移
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)
=> ThemeDisplayPage(
accentColor: theme.shadowColor
),
),
);
},
child: const Text('Go to Theme Display Page'),
),
],
),
),
);
}
}（theme_display_page.dart（遷移先の画面））取得したcontext を使用する：
import 'package:flutter/material.dart';
class ThemeDisplayPage extends StatelessWidget {
final Color accentColor;
const ThemeDisplayPage(
{super.key,
required this.accentColor
}
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Theme Display Page'),
),
body: Center(
child: Text(
'Using Theme Color',
style: TextStyle(color: accentColor),
),
),
);
}
}
上記のコードでは、
・useContextを直接使用する代わりにTheme.of(context)を使っていますが、これは実際にはcontextを使用して現在のテーマデータにアクセスしています。useContextは内部的にBuildContextを取得するために使用されるため、HookWidgetでは通常のcontextアクセスでも同じことができます。
・新しい画面（ThemeDisplayPage）に移動するためのボタンを追加し、そのボタンが押されると、現在のテーマのアクセントカラーを引数として新しい画面に渡しています。
このサンプルコードにより、BuildContextから取得した情報を別の画面に渡す方法を示しています。これにより、アプリケーション全体で一貫したスタイリングを維持することができます。