flutter code to divide the vertical space of the screen in 3 different equal parts with different co-CodePudding

i want to divide my screen vertically in three equal parts with three diffrent color and i am getting only white screen in output.

import 'package:flutter/material.dart';

void main() {
  runApp(const DivideVertically3EqualParts());
}

class DivideVertically3EqualParts extends StatefulWidget {
  const DivideVertically3EqualParts({super.key});

  @override
  State<DivideVertically3EqualParts> createState() =>
      _DivideVertically3EqualPartsState();
}

class _DivideVertically3EqualPartsState
    extends State<DivideVertically3EqualParts> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
            child: Container(
          color: Colors.orange,
        )),
        Expanded(
            child: Container(
          color: Colors.white,
        )),
        Expanded(
            child: Container(
          color: Colors.green,
        ))
      ],
    );
  }
}

here is code , i am getting white screen it should be orange , white and green.

CodePudding user response：

Your code need little bit changes.

double width = MediaQuery.of(context).size.width;
Row(
      children: [
        Expanded(
            child: Container(
          width : width : width /3
          color: Colors.orange,
        )),
        Expanded(
            child: Container(
            width : width /3
          color: Colors.white,
        )),
        Expanded(
            child: Container(
            width : width /3
          color: Colors.green,
        ))
      ],
    );

Btw your code is perfect. And it's working for me as well,

CodePudding user response：

You are seeing white screen probably because of the following error

Horizontal RenderFlex with multiple children has a null textDirection, so the layout order is undefined.

You can check Flutter error: RenderFlex with multiple children has a null textDirection to learn more about solutions of this error.

The easiest way to fix this is to wrap your widget with MaterialApp.

void main() async {
  runApp(
    MaterialApp(
      home: DivideVertically3EqualParts(),
    ),
  );
}

class DivideVertically3EqualParts extends StatefulWidget {
  const DivideVertically3EqualParts({super.key});

  @override
  State<DivideVertically3EqualParts> createState() =>
      _DivideVertically3EqualPartsState();
}

class _DivideVertically3EqualPartsState
    extends State<DivideVertically3EqualParts> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
            child: Container(
              color: Colors.orange,
            )),
        Expanded(
            child: Container(
              color: Colors.white,
            )),
        Expanded(
            child: Container(
              color: Colors.green,
            ))
      ],
    );
  }
}