divide screen into two equal parts in flutter
You can Use - MediaQuery
to get the size of screen then divide it by 2 to get the First half.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
// theme: ThemeData.light().copyWith(
// platform: _platform ?? Theme.of(context).platform,
// ),
home: DefaultTabController(
length: 3,
child: Scaffold(
// appBar: AppBar(
// title: Text(title),
// ),
body: SafeArea(
child: Column(children: <Widget>[
Container(
color: Colors.greenAccent,
height: MediaQuery.of(context).size.height / 2.2, // Also Including Tab-bar height.
// child: Chewie(
// controller: _chewieController,
// ),
),
PreferredSize(
preferredSize: Size.fromHeight(50.0),
child: TabBar(
labelColor: Colors.black,
tabs: [
Tab(
text: 'One',
),
Tab(
text: 'Two',
),
Tab(
text: 'Three',
)
], // list of tabs
),
),
//TabBarView(children: [ImageList(),])
Expanded(
child: TabBarView(
children: [
Container(
color: Colors.deepOrange,
child: Center(child: Text('Tab1')),
),
Container(
color: Colors.red,
child: Center(child: Text('Tab2')),
),
Container(
color: Colors.yellowAccent,
child: Center(child: Text('Tab3')),
) // class name
],
),
),
])))));
}
Output:
with AppBar - height: MediaQuery.of(context).size.height / 2.5,
with GridView.builder
in - TabBarView
Expanded(
child: TabBarView(
children: [
GridView.builder(
itemBuilder: (context, int) {
return CircleAvatar(
backgroundImage: NetworkImage(
'https://placeimg.com/640/480/any'),
);
},
itemCount: 20,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
shrinkWrap: true,
),
Container(
color: Colors.red,
child: Center(child: Text('Tab2')),
),
Container(
color: Colors.yellowAccent,
child: Center(child: Text('Tab3')),
) // class name
],
),
),
to fetch async data - use - FutureBuilder
@override
Widget build(BuildContext context) {
return FutureBuilder(
builder: (context,snap){
if(snap.hasData){
return Expanded(
child: GridView.count(
shrinkWrap: true,
childAspectRatio: 2,
scrollDirection: Axis.vertical,
crossAxisCount: 2,
children: new List<Widget>.generate(images.length, (index) {
return buildImage(images[index], context, index);
},
).toList(),
),
);
}
return Center(child: CircularProgressIndicator())
},
future: fetchSubCategoryContentlist(context, 20),
);
Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
https://docs.flutter.io/flutter/widgets/Expanded-class.html
Column(
children: <Widget>[
Expanded(
child: TopWidget()
),
CenterWidget(),
Expanded(
child: BottomWidget()
),
]
)
Edit: full source code here
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
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> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
)
),
Container(
height: 40,
color: Colors.grey
),
Expanded(
child: Container(
color: Colors.blueGrey,
)
),
]
);
}
}
Edit 2: and result here