Flutter full width Container

Question

I am trying to make Container full width but its not working

void main() {
  runApp(MaterialApp(
    title: "Practice",
    home: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.blueAccent)),
              child: Text("My Awesome Border"),
            )
          ],
        ),
      ],
    ),
  ));
}

this is output in browser

I have couple of more questions

• Why color of text is Red and size is big?

• How there is a yellow line under text?

Update

Resolved issue with MediaQuery. Here is full working code for future readers.

void main() {
  runApp(MaterialApp(
      title: "Practice",
      home: Scaffold(
        body: MyHomeScreen(),
      )));
}

class MyHomeScreen extends StatelessWidget {
  const MyHomeScreen({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: Colors.orange,
                  border: Border.all(color: Colors.blueAccent)),
              child: Text("My Awesome Border"),
            )
          ],
        )
      ],
    );
  }
}

Solution 1

There are several possibilities

1- Use MediaQuery.of(context).size.width,

Container(
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(color: Colors.blue)),
    child: Text("My Awesome Border"),
)

Here, make sure that your container has a parent that has context

2- Use double.infinity

Container(
    width: double.infinity,
    decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(color: Colors.blue)),
    child: Text("My Awesome Border"),
)

3- Use FractionallySizedBox widget

Creates a widget that sizes its child to a fraction of the total available space.

Example :

FractionallySizedBox(
           widthFactor: 1.0, // between 0 and 1 // 1 for max
           heightFactor: 1.0,
           child:Container(color: Colors.red
           ,),
         )

4- Use other widgets such as Expanded , Flexible and AspectRatio and more .

Output :

Solution 2

I'm used to work with flutter for mobile devices and this kind of error usually happen when we don't have a Scaffold as the base widget. I mean, we can have a SafeArea that has a Scaffold as child, but I don't think we can use a Column as root. So try putting a Scaffold and setting the Column as Scaffold's body. Hope this answer helps you somehow!

Solution 3

You can write:

 Container(
                width: double.infinite,
                
                child: Text("My Awesome Border"),
              )

Solution 4

By Using the LayoutBuilder a parent widget for your widget and set the constraint.maxWidth to your container to fill the Width.

LayoutBuilder(
        builder: (context, constraint){
          return Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: constraint.maxWidth,
                    decoration:
                    BoxDecoration(border: Border.all(color: Colors.blueAccent)),
                    child: Text("My Awesome Border"),
                  )
                ],
              ),
            ],
          );
        },
      ),

Hope it will you to achieve your requirement.

You have missed wrapping the child widget inside the Scaffold Widget like below so that only its showing a red color text and yellow line

 void main() {
  runApp(MaterialApp(
    title: "Practice",
    home: CartScreen()
  ));
}

class CartScreen extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: LayoutBuilder(
        builder: (context, constraint){
          return Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: constraint.maxWidth,
                    decoration:
                    BoxDecoration(border: Border.all(color: Colors.blueAccent)),
                    child: Text("My Awesome Border"),
                  )
                ],
              ),
            ],
          );
        },
      ),
    );
  }
}

Solution 5

Because you have used Column within MaterialPage without Scaffold or CupertinoScaffold. So if you wrap Your Column with Scaffold then you’ll see the Text’s yellow underlines removed and the text will be black.

And I see one other problem with your code, is it the wrong format for dart so it’s not readable so I mean it is not clean code.

Fully formatted code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: buildBody(),
      ),
    );
  }
  
  Widget buildBody(){
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.blueAccent)),
              child: Text("My Awesome Border"),
            )
          ],
        ),
      ],
    );
  }
}

View more solutions