CODEWITHSUNDEEP
flutterflutter-layout
Yahya Uddin
Yahya Uddin

Reputation: 28851

Flutter row not showing children in a non-material app

I have the following very simple Flutter code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.green,
        child: Row(
//          mainAxisAlignment: MainAxisAlignment.spaceBetween,
//          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
             Container(
               width: 100,
               height: 100,
               color: Colors.red,
             ),
             Container(
               width: 100,
               height: 100,
               color: Colors.blue,
             ),
          ],
        )
    );
  }
}

I expect to see an app with a green background, and 2 square boxes in a line.

However, I only seem to see the green background and no boxes.

I have also experimented with mainAxisAlignment and crossAxisAlignment.

What do I seem to be doing wrong?

Docs:

https://api.flutter.dev/flutter/widgets/Row-class.html

Upvotes: 2

Views: 1306

Answers (3)

Sanny khan
Sanny khan

Reputation: 383

import 'package:flutter/material.dart';
void main() {
  runApp(const  MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.green,
            child: Row(
//          mainAxisAlignment: MainAxisAlignment.spaceBetween,
//          crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Result in UI

Upvotes: 0

Franken Frank
Franken Frank

Reputation: 85

I ran your code and it raised the exception

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

I added textDirection to Row and it ran as expected

enter image description here

Upvotes: 1

Tor-Martin Holen
Tor-Martin Holen

Reputation: 1639

You need to wrap your container in a WidgetsApp or the more commonly used MaterialApp or CupertinoApp that builds upon WidgetsApp. These widgets provide the default configuration required for a flutter application. Like navigation behaviour and such, see this link for more info: https://api.flutter.dev/flutter/widgets/WidgetsApp/WidgetsApp.html

An working examples:

import 'package:flutter/material.dart';
//import 'package:flutter/cupertino.dart'; // If using CupertinoApp

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WidgetsApp( // Alternatively replace with MaterialApp or CupertinoApp
      color: Colors.white,
      builder: (context, widget) {
        return Container(
            color: Colors.green,
            child: Row(
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            )
        );
      },
    );
  }
}

Hope this helps :-)

Upvotes: 3

Related Questions