How do I change the direction of a row in flutter?

0
votes

I have been trying to solve this challenge to achieve the output using rows but I am not sure of how to change the direction of the center row to go from up to down or insert a column there... I have been trying to achieve this layout

But this is what i get

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.teal,
    body: SafeArea(
      child: Row(
        // crossAxisAlignment: CrossAxisAlignment.stretch,

        mainAxisAlignment: MainAxisAlignment.spaceBetween,

        children: [
          Container(
            width: 100,
            color: Colors.red,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
          Container(
            width: 100,
            color: Colors.blue,
          ),
        ],
      ),
    ),
  ),
);
}
}

This is the code...Please help

2
androidflutterdart

2 Answers

0
votes

Add your container inside Expanded Widget try below code hope it help to you.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            // crossAxisAlignment: CrossAxisAlignment.stretch,

            mainAxisAlignment: MainAxisAlignment.spaceBetween,

            children: [
              Expanded(
                child: Container(
                  width: 100,
                  color: Colors.red,
                ),
              ),
              Expanded(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.yellow,
                ),
              ),
              Expanded(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
              Expanded(
                child: Container(
                  width: 100,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Your Screen like -> enter image description here

0
votes

Do like this

...
children: <Widget>[
        Container(
          width: 100,
          color: Colors.red,
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
        Container(
          width: 100,
          color: Colors.blue,
        ),
      ],
...

You need a column there for your purpose.