divide screen into two equal parts in flutter

前端 未结 2 994
臣服心动
臣服心动 2021-02-08 05:40

Below is my screen, I am trying to get

 body: SafeArea(
        child: Column(
          children: [
            Expanded(child:
                  


        
相关标签:
2条回答
  • 2021-02-08 06:13

    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

    0 讨论(0)
  • 2021-02-08 06:23

    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),
        );
    
    0 讨论(0)
提交回复
热议问题