import 'package:flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Generated App', theme: new ThemeData( primarySwatch: Colors.blue, primaryColor: const Color(0xFF2196f3), canvasColor: const Color(0xFFfafafa), ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key? key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { static const List<Tab> tabs = <Tab>[ Tab(text: 'One'), Tab(text: 'Two'), Tab(text: 'Three'), ]; late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController ( vsync: this, length: tabs.length ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My App'), bottom: TabBar( controller: _tabController, tabs: tabs, ), ), body: TabBarView( controller: _tabController, children: tabs.map((Tab tab) { return createTab(tab); }).toList(), ), ); } Widget createTab(Tab tab){ return Center( child: Text( 'This is "${tab.text}" Tab.', style: const TextStyle( fontSize: 32.0, color: Colors.blue, ), ) ); } }
画面下部にタブバーを表示
static const List<Tab> tabs = <Tab>[ Tab(text: 'One', icon:Icon(Icons.star)), Tab(text: 'Two', icon:Icon(Icons.info)), Tab(text: 'Three', icon:Icon(Icons.home)), ]; late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController ( vsync: this, length: tabs.length ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My App'), ), bottomNavigationBar:Container( color: Colors.blue, child:TabBar( controller: _tabController, tabs:tabs, ), ), body: TabBarView( controller: _tabController, children: tabs.map((Tab tab) { return createTab(tab); }).toList(), ), ); }
drawer
class _MyHomePageState extends State<MyHomePage>{ static var _items = <Widget>[]; static var _message = 'ok.'; static var _tapped = 0; @override void initState() { super.initState(); for(var i = 0; i < 5; i++) { var item = ListTile( leading: const Icon(Icons.android), title: Text('No, $i'), onTap: () { _tapped = i; tapItem(); } ); _items.add(item); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter App'), ), body: Center( child: Text( _message, style: const TextStyle( fontSize: 32.0, ), ), ), drawer: Drawer( child: ListView( shrinkWrap: true, padding: const EdgeInsets.all(20.0), children: _items, ), ), ); } void tapItem(){ Navigator.pop(context); setState((){ _message = 'tapped:[$_tapped]'; }); } }