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

question from:https://stackoverflow.com/questions/66067531/flutter-full-width-container

Answer 1

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