Skip to content

Instantly share code, notes, and snippets.

@stegrams
Last active May 7, 2020 09:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stegrams/9a7ae83042f260b05e9ea2258d646ebd to your computer and use it in GitHub Desktop.
Save stegrams/9a7ae83042f260b05e9ea2258d646ebd to your computer and use it in GitHub Desktop.
A sample layout with a tabbar in the left middle of the page.
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/ticker_provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
List<Tab> _tabs = [];
TabController _tabController;
@override
void initState() {
super.initState();
_tabs = <Tab>[
Tab(
child: Text(
'Lectures',
overflow: TextOverflow.ellipsis,
),
),
Tab(
child: Text(
'More',
overflow: TextOverflow.ellipsis,
),
),
];
_tabController = TabController(length: _tabs.length, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
MediaQueryData mqd = MediaQuery.of(context);
double imageHeight = mqd.size.height * 2 / 5;
double tabBarHeight = mqd.size.height * 1 / 10;
Color tabColor = Colors.white;
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(
imageHeight + tabBarHeight,
),
child: Container(
padding: mqd.viewPadding.copyWith(bottom: 0),
color: Colors.cyan,
child: Column(
children: <Widget>[
Placeholder(
fallbackHeight: imageHeight,
),
Row(
children: <Widget>[
Container(
width: mqd.size.width * 1 / 2,
height: tabBarHeight,
color: tabColor,
child: TabBar(
indicatorColor: Colors.deepPurple,
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorWeight: 3,
tabs: _tabs,
controller: _tabController,
),
),
Container(
width: mqd.size.width / 2,
height: tabBarHeight,
color: tabColor,
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 20),
child: IconButton(
icon: Icon(Icons.arrow_drop_down_circle),
color: Colors.grey,
onPressed: () {
print('Down arrow pressed');
},
),
),
],
),
],
),
),
),
body: TabBarView(
children: <Widget>[
Container(color: Colors.green),
Container(color: Colors.yellow),
],
controller: _tabController,
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment