divide screen into two equal parts in flutter

Question

Below is my screen, I am trying to get

 body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(child:
            Chewie(
              controller: _chewieController,
            )
            ),
            TabBar(
              labelColor:Colors.black,
              tabs: categoryNames,
            ),
            Expanded(
                child:TabBarView(
                  children: [
                    ImageList()
                  ],
            ),
            ),
          ],
        )
    ),
  ),

But I am not getting how to divide a screen into parts and adding widgets for them. Please help me with this.

Above is my code what I have tried so far.

class ImageList extends StatelessWidget {
  final List<SubContentsDatum>images = [];

  //ImageModel data = new ImageModel();
  //ImageList();

  Widget build(context) {
    fetchSubCategoryContentlist(context, 20);
    print('iamgelist:$images');
    print('imagelistlengthimages:${images.length}');
    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(),
      ),
    );
  }

  Widget buildImage(SubContentsDatum image, BuildContext context, int index) {
    return SingleChildScrollView(
      padding: EdgeInsets.only(top: 20.0),
      child: Column(
        children: <Widget>[
          new InkResponse(
            child: Image.network(image.thumbnailUrl.replaceAll(
                "onnet-video-platform", "xxxxx")),
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) =>
                  ChewieDemo.fromChewieDemo(subContentsData: images[index],)));
            },
          ),
          Text(image.name,
            style: TextStyle(
                color: Colors.white
            ),
          ),
        ],
      ),
    );
  }

  Future<SubContentModel> fetchSubCategoryContentlist(BuildContext context,
      int value) async {
    String url = "http://xxxx:xx/onnet_api/mediaListByCatId.php";
    var body = Map<String, String>();
    body['publisherid'] = 102.toString();
    body['tag'] = "media";
    body['subtag'] = "list";
    body['catId'] = value.toString();

    http.Response res = await http.post(url, body: body);
    final data = json.decode(res.body);
    var map = Map<String, dynamic>.from(data);
    var subCategoryContentsResponse = SubContentModel.fromJson(map);

    if (res.statusCode == 200) {
      if (subCategoryContentsResponse.status == 1) {
        var subData = data['data'] as List;
        print('subcontentsresponse:$subData');
        for (var model in subData) {
          images.add(new SubContentsDatum.fromJson(model));
        }
        print('playerlengthimages:${images.length}');
      }
    }
  }
}

This is my imagelist class file I tried what all of you said but I didn't get the output.Please check with this code once.

remove - `Expanded( child: GridView.count(` expanded from here as you have define it already before. — anmol.majhail, Feb 28 '19 at 10:14
Thank you , solved. One more issue is there, in my Imagelist class until I finish fetchSubCategoryContentlist() method I should not execute rest of the code, how can I achieve this. — Mounika, Feb 28 '19 at 10:17
One more issue is there, in my Imagelist class until I finish fetchSubCategoryContentlist() method I should not execute rest of the code, how can I achieve this — Mounika, Feb 28 '19 at 10:21
you need to add - return statement - in `fetchSubCategoryContentlist` so when future gets complete- it can render data — anmol.majhail, Feb 28 '19 at 11:00

hiepav · Answer 1 · 2019-02-28T07:30:16.553

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

see my updated code, I tried whatever you said but it is showing incorrect use of parent widget — Mounika, Feb 28 '19 at 07:00
dont have any problem in my code. i tested it. see update code — hiepav, Feb 28 '19 at 07:28

anmol.majhail · Accepted Answer · 2019-02-28T10:47:03.497

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),
    );

actually in that tabbarview, I am trying to write a class which consists of gridview . Whenever I am trying this showing an error at expanded incorrect use of parent widget — Mounika, Feb 28 '19 at 07:11
I got an output if I am giving text and icons two or three but when I am passing class file then I am facing issue — Mounika, Feb 28 '19 at 07:12
can you please see my updated code in my question , I tried but I didn't get — Mounika, Feb 28 '19 at 09:10
in that imagelist class, for all tabs only that class it should call. I should not write code for each and every tab. — Mounika, Feb 28 '19 at 09:14
When I am using future Builder, got an error like named parameters must be in curly braces I have used your updated code — Mounika, Feb 28 '19 at 10:39
@Mounika - where you putting future Builder - is should be in build method. — anmol.majhail, Feb 28 '19 at 10:43
@anmol.majhail- I tried what you said but its showing empty tabs nothing is there inside, saying a build function returned null — Mounika, Feb 28 '19 at 10:52

divide screen into two equal parts in flutter

2 Answers2

Linked