Hacemos una verificación exhaustiva cada una de las secciones en nuestro sitio web con el objetivo de mostrarte siempre la información certera y actual.
Solución:
El uso de un widget Expandido hace que un elemento secundario de una Fila, Columna o Flex se expanda para llenar el espacio disponible en el eje principal (por ejemplo, horizontalmente para una Fila o verticalmente para una Columna). Si se expanden varios hijos, el espacio disponible se divide entre ellos según el factor flexible.
https://docs.flutter.io/flutter/widgets/Expanded-class.html
Column(
children: [
Expanded(
child: TopWidget()
),
CenterWidget(),
Expanded(
child: BottomWidget()
),
]
)
Editar: código fuente completo aquí
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
@override
Widget build(BuildContext context)
return Column(
children: [
Expanded(
child: Container(
color: Colors.green,
)
),
Container(
height: 40,
color: Colors.grey
),
Expanded(
child: Container(
color: Colors.blueGrey,
)
),
]
);
Edición 2: y resultado aquí
Puedes usar – MediaQuery para obtener el tamaño de la pantalla, divídalo por 2 para obtener la primera mitad.
@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: [
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
],
),
),
])))));
Producción:
con la barra de aplicaciones – height: MediaQuery.of(context).size.height / 2.5,
con GridView.builder en – 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
],
),
),
para obtener datos asincrónicos – uso – 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.generate(images.length, (index)
return buildImage(images[index], context, index);
,
).toList(),
),
);
return Center(child: CircularProgressIndicator())
,
future: fetchSubCategoryContentlist(context, 20),
);