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"),
            )
          ],
        )
      ],
    );
  }
}

Answer 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 :