[Flutter] アプリを作るのに最低限必要なウィジェットや機能を紹介

Flutterでアプリを作る上で最低限必要な機能やwidgetをまとめてみました

↓の自作アプリで使ったコードを載せています

アプリバー

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(context),
      backgroundColor: CommonColor.primaryColor,
      body: buildBody(context),
    );
  }

  AppBar buildAppBar(BuildContext context) {
    return AppBar(
      title: const Text("sampleapp"),
      centerTitle: true,
      backgroundColor: CommonColor.primaryColor,
      elevation: 0,
      actions: [
        IconButton(
          icon: const Icon(Icons.notifications),
          onPressed: () {
            Navigator.of(context).pushNamed(RoutePass.notify.name);
          },
        )
      ]
    );
  }

ボトムナビゲーションバー

var _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {

    const bottomNavigationBarIcon = [
      Icon(Icons.home), Icon(Icons.search), Icon(Icons.add),
      Icon(Icons.chat), Icon(Icons.person)
    ];

    const pageList = [
      HomePage(), LoginRoutePage(), PostRoutePage(),
      ChatRoutePage(), MyPageRoutePage(),
    ];

    void onItemTapped(int index) {
      setState(() {
        _selectedIndex = index;
      });
    }

    return Scaffold(
      bottomNavigationBar: buildBottomNavigationBar(onItemTapped, bottomNavigationBarIcon),
      body: pageList[_selectedIndex],
    );
  }

  BottomNavigationBar buildBottomNavigationBar(Function(int index) onItemTapped, List<Icon> bottomNavigationBarIcon) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: _selectedIndex,
      onTap: onItemTapped,
      unselectedItemColor: CommonColor.unSelectedColor,
      selectedItemColor: CommonColor.secondaryColor,
      showUnselectedLabels: true,
      iconSize: 20,
      unselectedLabelStyle: const TextStyle(fontSize: 11),
      selectedLabelStyle: const TextStyle(fontSize: 11),
      items: [
        for(int i = 0; i < 5; i++)...{
          BottomNavigationBarItem(
            icon: bottomNavigationBarIcon[i],
            label: CommonString.bottomNavigationBarLabel[i]
          ),
        }
      ],
    );
  }

画面遷移

画面遷移の方法は2種類あり、事前にroutesを登録して遷移先を決める方法と、必要に応じてroutesを登録するやり方があります。
今回は事前に遷移したいページのroutesを登録するしました

main.dart

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      routes: <String, WidgetBuilder>{
        "/": (BuildContext context) => const MyHomePage(),
        "/search_route_page": (BuildContext context) => const SearchRoutePage(),
        "/post_route_page": (BuildContext context) => const PostRoutePage(),
        "/chat_route_page": (BuildContext context) => const ChatRoutePage(),
        "/myPage_route_page": (BuildContext context) => const MyPageRoutePage(),
        "/notify_route_page": (BuildContext context) => const NotifyRoutePage(),
      },
    );
  }

routesを登録したら、遷移したいタイミングでpushNamed("遷移先のページのpass")をして遷移します

Navigator.of(context).pushNamed("/post_route_page")

Firebase

今回はFirestoreとFirebase Authenticationを使いました

Cloud Firestore
　MySQLのように色々なデータを保存する仕組みを提供します。アプリで必要となるデータの管理機能を簡単に作れます。

Authentication
　新規登録・ログインといったユーザー認証の仕組みを提供します。メールアドレス・電話番号・ソーシャルアカウントなどを使った認証機能が簡単に作れます。

詳しく書くと長くなりそうなので、私は↓のサイトを参考にしました
https://zenn.dev/umatoma/books/1f4cb2404f3fa9/viewer/0a4710

有料にはなりますが、一番はじめにFirebaseの使い方の基本を学ぶには良い教材だと思います

以上になります

参考になると嬉しいです