【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part129 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part129 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part128 Material Components
引き続き、Material Componentsについて学びます。
Bottom Navigation
Bottom Navigation
はマテリアルデザインのBottom Navigation
です(そのまんま)。
下部に表示されるタブのことです。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool dark = false;
int _selectedIndex = 0;
static const List<Widget> _widgets = <Widget>[
Text('Index 0: Home'),
Text('Index 1: Business'),
Text('Index 2: School'),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: dark ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
centerTitle: true, // タイトルが中央になります。
title: Text('Toggle theme sample'),
),
body: Center(
// 3. 保持したindexのウィジェットをbodyで表示
child: _widgets.elementAt(_selectedIndex),
),
// 1. ここで下部のデザインを設定
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home', // titleプロパティは非推奨になったようです。
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business', // titleプロパティは非推奨になったようです。
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School', // titleプロパティは非推奨になったようです。
),
],
currentIndex: _selectedIndex,
// 2. 選択したタブのindexを保持
onTap: _onItemTapped,
),
),
);
}
}
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false, // 戻るアイコンが表示されなくなります。
title: Text("次のページ"),
),
body: Container(
height: double.infinity,
color: Colors.red,
),
);
}
}
画面の下の部分にタブが表示されました!
最後に
Tab
の時と実装方法がだいぶ違いますね。
統一してくれたらありがたいのですが残念です😅
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません