実際の Google CLI のプロンプト実行以降の出力は以下のとおりです。
> 以下の機能を満たす新しいページを作ってください。
なお、ファイル名はtext_edit_page.dartで、
Riverpod+Hooks+Freezed前提で他のページとスタイルを合わせて作ってください。
1.ユーザーがテキストを入力する
2.ユーザーがボタンを押すと、入力したテキストがリッチなテキストで表示される
3.ユーザーがボタンを押すごとに、入力したテキストのスタイルがランダムに変わる
4.リッチなテキストをタップすると、その文字がシステムとしてコピーされる。（複製されるわけではなくテキストをどこかにペーストできるようになる）
5.コピーされたらコピーされたことがわかるようにトースト表示してください。
✦ 承知いたしました。Riverpod、Hooks、Freezedを使用し、既存のコードベースのスタイルに合わせた新しいページtext_edit_page.dartを作成しますね。
以下の手順で進めます。
1. 依存関係の確認: pubspec.yamlを読み、必要なパッケージ（fluttertoastなど）が揃っているか確認します。
2. StateとNotifierの作成: テキストとスタイルを管理するためのFreezedを使ったStateとStateNotifierを作成します。
3. UIページの作成: text_edit_page.dartを作成し、テキスト入力、スタイル変更ボタン、リッチテキスト表示、コピー機能を実装します。
4. ナビゲーションの追加: main.dartに新しいページへの導線を追加します。
まずは、pubspec.yamlを確認して、fluttertoastパッケージが既に追加されているか確認します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ ReadFile pubspec.yaml │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ fluttertoastパッケージが見つかりませんでした。トースト表示には、既に追加されているflutter_easyloadingパッケージを使用します。
まず、テキストとスタイルを管理するための状態管理ファイルを作成します。プロジェクトの構成に合わせ、lib/provider/ディレクトリにtext_edit_provider.dartとtext_edi
t_state_notifier.dartを作成します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to lib//text_edit_state_notifier.dart │
│ │
│ 1 import 'dart:math'; │
│ 2 import 'package:freezed_annotation/freezed_annotation.dart'; │
│ 3 import 'package:hooks_riverpod/hooks_riverpod.dart'; │
│ 4 │
│ 5 part 'text_edit_state_notifier.freezed.dart'; │
│ 6 │
│ 7 @freezed │
│ 8 class TextEditState with _$TextEditState { │
│ 9 const factory TextEditState({ │
│ 10 @Default('') String text, │
│ 11 @Default(0) int styleIndex, │
│ 12 }) = _TextEditState; │
│ 13 } │
│ 14 │
│ 15 class TextEditStateNotifier extends StateNotifier<TextEditState> { │
│ 16 TextEditStateNotifier() : super(const TextEditState()); │
│ 17 │
│ 18 final _random = Random(); │
│ 19 │
│ 20 void setText(String text) { │
│ 21 state = state.copyWith(text: text, styleIndex: _random.nextInt(4)); │
│ 22 } │
│ 23 │
│ 24 void changeStyle() { │
│ 25 state = state.copyWith(styleIndex: _random.nextInt(4)); │
│ 26 } │
│ 27 } │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to ...lib/provider/text_edit_provider.dart │
│ │
│ 1 import 'package:hooks_riverpod/hooks_riverpod.dart'; │
│ 2 │
│ 3 import 'text_edit_state_notifier.dart'; │
│ 4 │
│ 5 final textEditProvider = StateNotifierProvider<TextEditStateNotifier, TextEditState>( │
│ 6 (ref) => TextEditStateNotifier(), │
│ 7 ); │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ Freezedで生成されるファイルを作成するため、build_runnerを実行します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell flutter pub run build_runner build --delete-conflicting-outputs │
│ │
│ bash: flutter: command not found │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ flutterコマンドが見つからないようです。FVM(Flutter Version Management)を使用しているようなので、fvm経由でコマンドを実行します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell fvm flutter pub run build_runner build --delete-conflicting-outputs │
│ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ A new version of Flutter is available! │ │
│ │ │ │
│ │ To update to the latest version, run "flutter upgrade". │ │
│ └─────────────────────────────────────────────────────────┘ │
│ [INFO] Generating build script... │
│ [INFO] Generating build script completed, took 254ms │
│ │
│ [INFO] Initializing inputs │
│ [INFO] Reading cached asset graph... │
│ [INFO] Reading cached asset graph completed, took 112ms │
│ │
│ [INFO] Checking for updates since last build... │
│ [INFO] Checking for updates since last build completed, took 1.2s │
│ │
│ [INFO] Running build... │
│ [INFO] 1.0s elapsed, 65/98 actions completed. │
│ [INFO] 4.8s elapsed, 72/101 actions completed. │
│ [INFO] 5.9s elapsed, 117/135 actions completed. │
│ [INFO] 6.9s elapsed, 218/230 actions completed. │
│ [INFO] 7.9s elapsed, 357/365 actions completed. │
│ [INFO] 9.4s elapsed, 487/488 actions completed. │
│ [INFO] 13.0s elapsed, 487/488 actions completed. │
│ [INFO] Running build completed, took 13.6s │
│ │
│ [INFO] Caching finalized dependency graph... │
│ [INFO] Caching finalized dependency graph completed, took 145ms │
│ │
│ [INFO] Succeeded after 13.8s with 482 outputs (978 actions) │
│ │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ freezedファイルが生成されたので、次にUI部分を作成します。lib/screen/ディレクトリにtext_edit_page.dartを作成します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to lib/screen/text_edit_page.dart │
│ │
│ 1 import 'package:flutter/material.dart'; │
│ 2 import 'package:flutter/services.dart'; │
│ 3 import 'package:flutter_hooks/flutter_hooks.dart'; │
│ 4 import 'package:hooks_riverpod/hooks_riverpod.dart'; │
│ 5 import 'package:flutter_easyloading/flutter_easyloading.dart'; │
│ 6 import 'package:animated_text_kit/animated_text_kit.dart'; │
│ 7 │
│ 8 import '../provider/text_edit_provider.dart'; │
│ 9 │
│ 10 class TextEditPage extends HookConsumerWidget { │
│ 11 const TextEditPage({Key? key}) : super(key: key); │
│ 12 │
│ 13 @override │
│ 14 Widget build(BuildContext context, WidgetRef ref) { │
│ 15 final textController = useTextEditingController(); │
│ 16 final textEditState = ref.watch(textEditProvider); │
│ 17 final textEditNotifier = ref.read(textEditProvider.notifier); │
│ 18 │
│ 19 final textStyles = [ │
│ 20 const TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.blue), │
│ 21 const TextStyle(fontSize: 24, fontStyle: FontStyle.italic, color: Colors.red), │
│ 22 const TextStyle(fontSize: 28, decoration: TextDecoration.underline, color: Colors.green), │
│ 23 const TextStyle(fontSize: 26, letterSpacing: 2.0, color: Colors.purple), │
│ 24 ]; │
│ 25 │
│ 26 return Scaffold( │
│ 27 appBar: AppBar( │
│ 28 title: const Text('Text Edit'), │
│ 29 ), │
│ 30 body: Padding( │
│ 31 padding: const EdgeInsets.all(16.0), │
│ 32 child: Column( │
│ 33 children: [ │
│ 34 TextField( │
│ 35 controller: textController, │
│ 36 decoration: const InputDecoration( │
│ 37 border: OutlineInputBorder(), │
│ 38 labelText: 'Enter Text', │
│ 39 ), │
│ 40 ), │
│ 41 const SizedBox(height: 20), │
│ 42 ElevatedButton( │
│ 43 onPressed: () { │
│ 44 textEditNotifier.setText(textController.text); │
│ 45 }, │
│ 46 child: const Text('Show Rich Text'), │
│ 47 ), │
│ 48 const SizedBox(height: 20), │
│ 49 if (textEditState.text.isNotEmpty) │
│ 50 GestureDetector( │
│ 51 onTap: () { │
│ 52 Clipboard.setData(ClipboardData(text: textEditState.text)); │
│ 53 EasyLoading.showToast('Copied to Clipboard'); │
│ 54 }, │
│ 55 child: AnimatedTextKit( │
│ 56 animatedTexts: [ │
│ 57 WavyAnimatedText( │
│ 58 textEditState.text, │
│ 59 textStyle: textStyles[textEditState.styleIndex], │
│ 60 ), │
│ 61 ], │
│ 62 isRepeatingAnimation: false, │
│ 63 ), │
│ 64 ), │
│ 65 const SizedBox(height: 20), │
│ 66 ElevatedButton( │
│ 67 onPressed: () { │
│ 68 textEditNotifier.changeStyle(); │
│ 69 }, │
│ 70 child: const Text('Change Style'), │
│ 71 ), │
│ 72 ], │
│ 73 ), │
│ 74 ), │
│ 75 ); │
│ 76 } │
│ 77 } │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ 最後に、main.dartにこのページへの遷移を追加します。既存のホームページにボタンを追加して、TextEditPageに遷移できるようにします。まずmain.dartの現在の内容を確認
します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ ReadFile lib/main.dart │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ TopPageにボタンを追加して、TextEditPageに遷移するようにします。lib/screen/10_top/top_page.dartを読み込みます。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ ReadFile lib/screen/10_top/top_page.dart │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ top_page.dartにTextEditPageへの遷移ボタンを追加します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit lib/screen/10_top/top_page.dart: SizedBox(height: 1... => SizedBox(height: 1... │
│ │
│ 143 SizedBox( │
│ 144 width: 160, │
│ 145 child: buildPanelButton( │
│ 146 + icon: Icons.edit, │
│ 147 + title: "テキスト編集", │
│ 148 + color: Colors.green, │
│ 149 + onPressed: () { │
│ 150 + moveToTextEditPage(context: context); │
│ 151 + }), │
│ 152 + ), │
│ 153 + SizedBox(height: 16), │
│ 154 + SizedBox( │
│ 155 + width: 160, │
│ 156 + child: buildPanelButton( │
│ 157 icon: Icons.question_answer_outlined, │
│ 158 title: "チャレンジ", │
│ 159 color: Colors.amber, │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit lib/screen/10_top/top_page.dart: import 'package:project/u... => import 'package:project/s... │
│ │
│ 22 import 'package:project/screen/60_setting/setting_page.dart'; │
│ 23 import 'package:project/screen/80_gacha/gacha_page.dart'; │
│ 24 import 'package:project/screen/90_card_animation/card_animation_page.dart'; │
│ 25 - import 'package:project/util/date_time_util.dart'; │
│ 25 + import 'package:project/screen/text_edit_page.dart'; │
│ 26 import 'package:flutter_hooks/flutter_hooks.dart'; │
│ 27 import 'package:flutter_neumorphic_plus/flutter_neumorphic.dart'; │
│ 28 import 'package:flutter_svg/flutter_svg.dart'; │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit lib/screen/10_top/top_page.dart: });... => });... │
│ │
│ 597 }); │
│ 598 } │
│ 599 │
│ 600 + // move to text edit page │
│ 601 + void moveToTextEditPage({required BuildContext context, Function? then}) { │
│ 602 + Navigator.push( │
│ 603 + context, │
│ 604 + MaterialPageRoute( │
│ 605 + builder: (context) => const TextEditPage(), │
│ 606 + ), │
│ 607 + ).then((_) { │
│ 608 + then?.call(); │
│ 609 + }); │
│ 610 + } │
│ 611 + │
│ 612 // move to next page after function │
│ 613 Future<void> moveToNextPageAfterFunction({required WidgetRef ref}) async { │
│ 614 print("[TopPage] moveToNextPageAfterFunction called"); │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ これで、TextEditPageの作成と、そのページへの遷移が実装できました。
要約すると、以下のファイルを作成・変更しました。
* lib/provider/text_edit_state_notifier.dart: テキストとスタイルを管理するStateNotifierを作成しました。
* lib/provider/text_edit_provider.dart: StateNotifierProviderを定義しました。
* lib/screen/text_edit_page.dart: テキストの入力、表示、スタイル変更、コピー機能を持つUIを作成しました。
* lib/screen/10_top/top_page.dart: TextEditPageへの遷移ボタンを追加しました。
以上で実装は完了です。
accepting edits (shift + tab to toggle)
実際に生成されたコードは以下のとおりです。
生成された実際のコード紹介
1. メインページ（text_edit_page.dart）
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import '../provider/text_edit_provider.dart';
class TextEditPage extends HookConsumerWidget {
const TextEditPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final textController = useTextEditingController();
final textEditState = ref.watch(textEditProvider);
final textEditNotifier = ref.read(textEditProvider.notifier);
final textStyles = [
const TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.blue),
const TextStyle(fontSize: 24, fontStyle: FontStyle.italic, color: Colors.red),
const TextStyle(fontSize: 28, decoration: TextDecoration.underline, color: Colors.green),
const TextStyle(fontSize: 26, letterSpacing: 2.0, color: Colors.purple),
];
return Scaffold(
appBar: AppBar(
title: const Text('Text Edit'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: textController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter Text',
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
textEditNotifier.setText(textController.text);
},
child: const Text('Show Rich Text'),
),
const SizedBox(height: 20),
if (textEditState.text.isNotEmpty)
GestureDetector(
onTap: () {
Clipboard.setData(ClipboardData(text: textEditState.text));
EasyLoading.showToast('Copied to Clipboard');
},
child: AnimatedTextKit(
animatedTexts: [
WavyAnimatedText(
textEditState.text,
textStyle: textStyles[textEditState.styleIndex],
),
],
isRepeatingAnimation: false,
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
textEditNotifier.changeStyle();
},
child: const Text('Change Style'),
),
],
),
),
);
}
}
2. 状態管理（text_edit_state_notifier.dart）
import 'dart:math';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
part 'text_edit_state_notifier.freezed.dart';
@freezed
class TextEditState with _$TextEditState {
const factory TextEditState({
@Default('') String text,
@Default(0) int styleIndex,
}) = _TextEditState;
}
class TextEditStateNotifier extends StateNotifier<TextEditState> {
TextEditStateNotifier() : super(const TextEditState());
final _random = Random();
void setText(String text) {
state = state.copyWith(text: text, styleIndex: _random.nextInt(4));
}
void changeStyle() {
state = state.copyWith(styleIndex: _random.nextInt(4));
}
}3. Provider定義（text_edit_provider.dart）
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'text_edit_state_notifier.dart';
final textEditProvider = StateNotifierProvider<TextEditStateNotifier, TextEditState>(
(ref) => TextEditStateNotifier(),
);
楽天ブックス
¥2,640 （2026/01/06 16:23時点 | 楽天市場調べ）
ポチップ
楽天ブックス
¥1,980 （2026/01/09 08:23時点 | 楽天市場調べ）
ポチップ
ポチップ
1 2
