[Flutter]TabViewの２種類の使い方

今回は、TabViewの使い方を２つ紹介しようと思います。使いたい場面に応じて使うことをおすすめします。

１つ目は、initStateを何度も読み込みタイプのTabViewです。
２つ目は、initStateを初回のみ読み込むタイプのTabViewです。

使い方①

１つ目は、initStateを何度も読み込みタイプのTabViewです。
それぞれの画面内のinitStateを見てみてください。これが一般的なパターンだと思われます。

import 'package:flutter/material.dart';

class TabScreen extends StatefulWidget {
  const TabScreen({Key? key}) : super(key: key);

  @override
  _TabScreenState createState() => _TabScreenState();
}

class _TabScreenState extends State<TabScreen> {
  int index = 0;

  void _onItemTapped(int selectIndex) {
    setState(() {
      index = selectIndex;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: [
        const ColoredBox(color: Colors.red),
        const ColoredBox(color: Colors.black),
        const ColoredBox(color: Colors.green),
      ][index],
      bottomNavigationBar: BottomNavigationBar(
        elevation: 0,
        iconSize: 30,
        showUnselectedLabels: false,
        showSelectedLabels: false,
        currentIndex: index,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home)),
          BottomNavigationBarItem(icon: Icon(Icons.favorite)),
          BottomNavigationBarItem(icon: Icon(Icons.notifications)),
        ],
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

使い方②

２つ目は、initStateを初回のみ読み込むタイプのTabViewです。
この使用例としては、何度も読み込むことを防ぐ効果があります。私の場合は、Mapのピンの読み込みを2回以上行うと消えてしまうエラーを防ぐために行いました。

import 'package:flutter/material.dart';

class TabScreen extends StatefulWidget {
  const TabScreen({Key? key}) : super(key: key);

  @override
  _TabScreenState createState() => _TabScreenState();
}

class _TabScreenState extends State<TabScreen> {
  int index = 0;

  void _onItemTapped(int selectIndex) {
    setState(() {
      index = selectIndex;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: index,
        children: const [
          ColoredBox(color: Colors.red),
          ColoredBox(color: Colors.black),
          ColoredBox(color: Colors.green),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 0,
        iconSize: 30,
        showUnselectedLabels: false,
        showSelectedLabels: false,
        currentIndex: index,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home)),
          BottomNavigationBarItem(icon: Icon(Icons.favorite)),
          BottomNavigationBarItem(icon: Icon(Icons.notifications)),
        ],
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

最後に

Verooは、Blockchain技術を活用した「想いの巡るグルメSNSアプリ」です。食に対する熱量、例えばラーメンがめちゃくちゃ好きで年間400杯食べているとか、変態的に具材にこだわった中華料理を作っているなどのような、今まで直接お金にはならなかった食に対する情熱や熱量、その裏側にある想いがトークンを使うことで巡る世界。自分のラーメンに費やす熱量がコミュニティに承認される。自分がほんとにいいと思って作った食べ物がコミュニティで広まる。Verooは単なるSNSアプリではなく、クリエイターたちの想いが紡がれるソーシャルグルメアプリです。

Homepage: https://veroo.xyz/

Discord URL：https://t.co/VoT0gpsflA