Flutter full width Container - flutter

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 :

Answer 2

You can write:
Container(
width: double.infinity,
child: Text("My Awesome Border"),
)

Answer 3

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!

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

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

Answer 6

You are missing the Scaffold widget. Try using the scaffold widget before the column widget. It will fix the issue