divide screen into two equal parts in flutter

前端 未结 2 993
臣服心动
臣服心动 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: [
        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 {
    
      @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,
                  )
              ),
            ]
        );
      }
    }
    

    Edit 2: and result here

提交回复
热议问题