조용한 담장

BottomNavigationBar, BottomAppBar 본문

Flutter

BottomNavigationBar, BottomAppBar

iosroid 2019. 7. 29. 17:04

BottomAppBar

A container that is typically used with Scaffold.bottomNavigationBar, and can have a notch along the top that makes room for an overlapping FloatingActionButton.

자유롭게 구현이 가능한 것 같다.

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BottomAppBar demo'),
),
body: Center(
child: Text('body'),
),
bottomNavigationBar: BottomAppBar(
child: Container(
color: Colors.yellow,
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('This is Bottom'),
Icon(Icons.arrow_downward),
]
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.thumb_up),
onPressed: null,
),
);
}
}

BottomNavigationBar

A material widget that's displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. For larger screens, side navigation may be a better fit.

선택에 따라 다른 화면이 그려지도록 구성해 보았다.

class _MyHomePageState extends State<MyHomePage> {
int _visited = 1;
int _bottomItemIndex = 0;
Widget _listView(int index) {
Widget ret;
if(index == 0) {
ret = ListView.builder(
itemCount: _visited,
itemBuilder: (context, int listRow) {
return Center(child: Text('List page index: $listRow, BottomItem : $_bottomItemIndex'));
},
);
_visited++;
} else if(index == 1) {
ret = Container(
color: Colors.yellow,
child: Center(
child: Text('Page 2, BottomItem : $_bottomItemIndex'),),
);
} else if(index == 2) {
ret = PageView(
children: <Widget>[
Center(
child: Text.rich(
TextSpan(
text: 'Page1 of\nBottomItem : $_bottomItemIndex',
style: Theme.of(context).textTheme.display1
),
),
),
Center(
child: Text.rich(
TextSpan(
text: 'Page2 of\nBottomItem : $_bottomItemIndex',
style: Theme.of(context).textTheme.display1
),
),
),
],
);
}
return ret;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BottomNavigationBar demo'),
),
body: Center(
child: _listView(_bottomItemIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.looks_one),
title: Text('BottomItem'),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_two),
title: Text('BottomItem'),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_3),
title: Text('BottomItem'),
),
],
currentIndex: _bottomItemIndex,
selectedItemColor: Colors.amber[800],
onTap: (int index) {
setState(() {
_bottomItemIndex = index;
});
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.thumb_up),
onPressed: null,
),
);
}
}

'Flutter' 카테고리의 다른 글

url_launcher  (0) 2019.08.07
Flutter : Platform-specific code  (0) 2019.08.06
Drawer  (0) 2019.08.02
AnimatedSwitcher  (0) 2019.07.31
Tab  (0) 2019.07.24
Comments