Question 78916 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter code to divide the vertical space of the screen in 3 different equal parts with different colors

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.

Tags:

2

Answers


  1. 0

    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,

    Login or Signup to reply.
  2. 0

    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,
            ))
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search