🌟

[Riverpod_Hooks解説]

2024/03/15に公開

Flutter

riverpodでtabcontrollerを使うときに、stateを保持する必要があったためhookswidgetについて勉強しました。ルビーDogさんの動画を参考にしています。

⭐️これだけ覚えろHooksWidget⭐️

1 useState
widgetにstateを持たせられる、statefulWidgetの代わりになるもの
stateを表示するときはcount.value、変更する時もcount.valueを用いる。

initialCount = useState(5);
Text('初めのカウントは、${count.value}です。')
count.value++;
Text('新しいカウントは、${count.value}です')

2 useEffect
画面が表示された場合、消えた場合で何かしたい！という時に用いる。
initialvoid()、disepose()などの代わりになる。

useEffect((){
(画面が表示された時にしたいこと)
return (画面が消えた時にしたいこと)
},
const[関係する変数],});

3 use TextEditingController
下のコードのみで、controllerをdispose();する必要がなくなる！とっても便利になった。

final TextEditingController = useTextEditingController();

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:go_router_app/app_router.dart';
import 'package:go_router_app/chat/view/chat_page.dart';
import 'package:go_router_app/home/view/home_page.dart';
import 'package:go_router_app/navigation_bar.dart';
import 'package:go_router_app/person/view/personal_page.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
// import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

/// The route configuration.
class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    //GoRouterProviderを監視
    final _router = ref.watch(goRouterProvider);
    //MaterialAppの形で、routerの持つstateを持たせる。
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}


# 実践

/// ホームスクリーン
class HomeScreen extends ConsumerWidget {
  List pages = [
    HomePage(),
    ChatPage(),
    PersonalPage(),
  ];

  @override
  Widget build(BuildContext context, WidgetRef ref) {
//TODO  ⭐️selectedindexのバリューを変えるために⭐️
//⭐️このページが参照するstate⭐️

    int selectedIndex = ref.watch(navigationBarProvider);

    return Scaffold(
      body: pages[selectedIndex],

      //Text(selectedIndex.toString()),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: selectedIndex,
        //TODO riverpodの場合は、値を更新できない。

        onTap: (index) {
          ref.read(navigationBarProvider.notifier).onItemTapped(index);
          selectedIndex = index;
        },

        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: ''),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: ''),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: ''),
        ],
      ),
    );
  }
}

⭐️これだけ覚えろHooksWidget⭐️

Discussion