In course of my exploration of the flutter framework I came across a problem, I didn't know how to solve. Can I use TabBar in combination with TabBarView as a child of other widgets?
What is TabBar Widget? TabBar Widget is nothing but a horizontal row of tabs and displays a widget that corresponds to the currently selected tab. To display a horizontal row of tabs, we can use the TabBar Widget. To display a widget that corresponds to the currently selected tab, we can use the TabBarView page view.
It's simple. You can use any widget inside TabBarView. But to change the page according to Tab change, you have to use TabBarController or wrap with DefaultTabBarController. Here is a bare minimal cleaner example with DefaultTabBarController:
The TabBar and TabBarView widgets have to be put as the descendant of the child widget (below the DefaultTabController node in the tree). Another way to provide a controller is by using the controller argument of the TabBar.
The TabPageSelector widget is used to display a row of small circular indicators, one per tab. The selected tab’s indicator will have a different appearance from the others. TabBar, TabBarView, and TabPageSelector can be wired up with a controller, which can be declared and initialized like so:
Turns out it works. This is the relevant code snippet:
new Container(
decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
child: new TabBar(
controller: _controller,
tabs: [
new Tab(
icon: const Icon(Icons.home),
text: 'Address',
),
new Tab(
icon: const Icon(Icons.my_location),
text: 'Location',
),
],
),
),
new Container(
height: 80.0,
child: new TabBarView(
controller: _controller,
children: <Widget>[
new Card(
child: new ListTile(
leading: const Icon(Icons.home),
title: new TextField(
decoration: const InputDecoration(hintText: 'Search for address...'),
),
),
),
new Card(
child: new ListTile(
leading: const Icon(Icons.location_on),
title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
),
),
],
),
),
And this is a working example:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
TabController _controller;
@override
void initState() {
super.initState();
_controller = new TabController(length: 2, vsync: this);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('TestProject'),
),
body: new ListView(
children: <Widget>[
new Card(
child: new ListTile(
title: const Text('Some information'),
),
),
new Container(
decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
child: new TabBar(
controller: _controller,
tabs: [
new Tab(
icon: const Icon(Icons.home),
text: 'Address',
),
new Tab(
icon: const Icon(Icons.my_location),
text: 'Location',
),
],
),
),
new Container(
height: 80.0,
child: new TabBarView(
controller: _controller,
children: <Widget>[
new Card(
child: new ListTile(
leading: const Icon(Icons.home),
title: new TextField(
decoration: const InputDecoration(hintText: 'Search for address...'),
),
),
),
new Card(
child: new ListTile(
leading: const Icon(Icons.location_on),
title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
),
),
],
),
),
new Card(
child: new ListTile(
title: const Text('Some more information'),
),
),
new RaisedButton(
color: Theme.of(context).primaryColor,
onPressed: () {},
child: const Text(
'Search for POIs',
style: const TextStyle(color: Colors.white),
),
),
],
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With