Futterは、一般的なページフレームを構築します。

最終的に実現した結果は上の図のように、上の方にナビゲーションバーがあります。下の方には4つのアイコンがあります。対応するアイコンをクリックして、対応するページにジャンプします。
アイコンの準備
今回のルーチンは4つのアイコン、2つの色が必要です。そしてpbspec.yamlの中のクラスメイトに素材の所在目録を指定します。注意したいのは、pngファイルであればディレクトリ全体を直接指定すればいいですが、jpgフォーマットであれば、ファイル名と拡張子を同時に指定する必要があります。
Bottom NavigationBar概要
Bottom NavigationBarの構造関数は以下の通りである。

BottomNavigationBar({
    Key? key,
    required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation,
    this.type,
    Color? fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color? selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme,
    this.unselectedIconTheme,
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels,
    this.showUnselectedLabels,
    this.mouseCursor,
  })

一般的な属性は以下の通りです。

items：および対応するページ構成要素配列

currentIndex：デフォルトは第数ページ

を表示します。

type：コンポーネントタイプで、Bottom NavigationBarTypeを使って、fixedとshiftingの2種類があります。fixedはアイコンの固定位置で、shiftingのアイコンはクリックした後にドリフトの効果があって、実際に試してみることができて、普通はfixedを使うのが比較的に多いです。

onTap：クリックした後のイベントは、通常はこの更新された状態のデータを使って、ページを更新します。

その他の属性は、スタイルを制御するためのもので、必要に応じてアイコンサイズ、テーマ色、フォントなどのパラメータを設定できます。
プロジェクトページ構造の構築
まず、4つの業務ページを新たに作って、それぞれdynamic.dart、message.dart、category.dartとmine.dartと、それぞれ動態、メッセージ、分類閲覧と個人センターの4つのページに対応します。この四つのページは簡単です。ページの真ん中に「島上コード農」という四つの文字が順次表示されます。コードは似ています。dynamicを例にします。

import 'package:flutter/material.dart';

class DynamicPage extends StatelessWidget {
  const DynamicPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(' '),
      ),
    );
  }
}

注意するのはここのScaffoldはAppBarがないです。これはトップページにすでにありますので、AppBarがあると二つが現れます。
第二に、四つの業務ページを管理するためのトップページを新設し、ap.dartと名づけました。app.dartはBottom NavigationBarを使用して四つの業務ページを管理します。

import 'package:flutter/material.dart';
import 'dynamic.dart';
import 'message.dart';
import 'category.dart';
import 'mine.dart';

class AppHomePage extends StatefulWidget {
  AppHomePage({Key key}) : super(key: key);

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

class _AppHomePageState extends State<AppHomePage> {
  int _index = 0;

  List<Widget> _homeWidgets = [
    DynamicPage(),
    MessagePage(),
    CategoryPage(),
    MinePage(),
  ];

  void _onBottomNagigationBarTapped(index) {
    setState(() {
      _index = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('    '),
      ),
      body: IndexedStack(
        index: _index,
        children: _homeWidgets,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _index,
        onTap: _onBottomNagigationBarTapped,
        items: [
          _getBottomNavItem(
              '  ', 'images/dynamic.png', 'images/dynamic-hover.png', 0),
          _getBottomNavItem(
              '   ', 'images/message.png', 'images/message-hover.png', 1),
          _getBottomNavItem(
              '    ', 'images/category.png', 'images/category-hover.png', 2),
          _getBottomNavItem(
              '    ', 'images/mine.png', 'images/mine-hover.png', 3),
        ],
      ),
    );
  }

  BottomNavigationBarItem _getBottomNavItem(
      String title, String normalIcon, String pressedIcon, int index) {
    return BottomNavigationBarItem(
      icon: _index == index
          ? Image.asset(
              pressedIcon,
              width: 32,
              height: 28,
            )
          : Image.asset(
              normalIcon,
              width: 32,
              height: 28,
            ),
      label: title,
    );
  }
}

ここで重要なところは二つあります。一つはIndexedStockを使っています。これは管理ページで階層を表示する容器です。index属性を使用して、現在のコンテナの中のページが一番上にあると確定します。容器の中のページはchildren属性で設定されています。Widget配列が必要です。したがって、論理とは、Bottom NavigationBarのアイコンがクリックされると、クリックイベントに対応してonTap属性が指定する方法で、現在のクリックインデックス値をコールバック関数に伝達するので、この方法でIndexedStockのページレベルの切り替えを制御することができます。
最後に、状態変数(u)を使用しました。indexは、Indexedstatckが現在表示しているページのインデックス値を記憶しています。その後、Bottom NavigationBarのアイコンをクリックしてイベントが発生したら、リセット関数でset Stateを使って状態変数を更新します。indexは現在のインターフェースを更新します。
入り口を簡略化する
main.dartは入り口のファイルで、最も基本的な配置とグローバル初期化の配置をすべきで、業務コードがあるべきではないので、main方法からトップページをロードすればいいです。このようにしてメール・dartファイルを簡潔にすることができます。これも開発の際に注意すべき点であり、関連コードを剥離し、関連コードを集約する、いわゆる「高凝集、低結合」の原則である。

import 'package:flutter/material.dart';
import 'app.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App   ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AppHomePage(),
    );
  }
}

コード多重化
コードを書く時は多重化に注意して、ここでBottom NavigationBar元素を構築します。get Bottom NavItemは、コードの多重性と維持性を向上させ、Futterのコンポーネント構築のbuild方法に過剰な要素と入れ子が発生し、コードの可読性に影響を与えることを回避することができる。
以上はFutterが一般的なページフレームを構築するための詳細な内容です。Futterに関するページフレームを構築するための資料は他の関連記事に注目してください。