I am using Wrap widget to align widgets on center and right, please see the below image what i am trying to achieve.
Using wrap widget instead of Row widget because widget get adjusted on available space when resizing the screen.
Below is the code tried to get the above result as shown in the image.
Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 30.0,
children: [
Wrap(
spacing: 20,
children: const [
Text("About Me"),
Text("B"),
Text("C"),
Text("D"),
],
),
Wrap(
alignment: WrapAlignment.end,
children: [
Text("My Data"),
],
),
],
),
but widgets are not aligned properly, above code output as below.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topRight,
child: Wrap(
alignment: WrapAlignment.center,
spacing: MediaQuery.of(context).size.width * 0.4,
children: [
Wrap(
spacing: MediaQuery.of(context).size.width * 0.05,
children: const [
Text("About Me"),
Text("B"),
Text("C"),
Text("D"),
],
),
Wrap(
alignment: WrapAlignment.end,
children: [
Text("My Data"),
],
),
],
),
);
}
}
here is the output
Related
I'm trying to make a screen that the blue container is on top of the content of the grey container, but the way I'm doing the blue container is pushing the content of the grey container. How could I make the blue container when expanded to be on top of the grey one? Do I have to use stack? I couldn't understand how I can do it.
class _TestScreenState extends State<TestScreen> {
bool isExpanded = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: LayoutBuilder(
builder: (p0, p1) {
final widthScreen = p1.maxWidth;
final heightScreen = p1.maxHeight;
return Column(
children: [
Container(
color: Colors.amber,
width: widthScreen,
height: heightScreen * 0.32,
child: Column(
children: [
Row(
children: [
IconButton(
iconSize: 30,
icon: const Icon(Icons.arrow_back),
onPressed: () {},
),
],
),
],
),
),
Expanded(
child: Container(
height: heightScreen * .5,
alignment: Alignment.bottomCenter,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text("line 1"),
Text("line 2"),
Text("line 3"),
AnimatedContainer(
duration: Duration(milliseconds: 300),
height: isExpanded
? heightScreen - heightScreen * 0.32
: heightScreen * .2,
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
iconSize: 30,
color: Colors.black,
icon: const Icon(Icons.ac_unit),
onPressed: () {
setState(() {
isExpanded = !isExpanded;
});
},
)
]),
],
),
),
],
),
),
),
],
);
},
),
);
}
}
Yes you have to use a Stack:
Columns and Rows only put UI elements next to each other.
Stack(
children: [
BottomWidget(),
MiddleWidget(),
TopWidget(),
]
),
If you want your TopWidget to also be at the top of the screen wrap it with an Align widget.
In your case replace TopWidget() with whatever you want to be on top (probably the blue container).
Also watch this 1 min video about the Stack widget: Stack - Flutter.
In column you should wrap all the widgets with expanded widget and provide flex accourding to the size which you need. Try the code as followed:
Column(
children: [
Expanded(flex: 2, child: Container(color:
Colors.red));
Expanded(flex: 3, child: Container(color:
Colors.green));
Expanded(flex: 1, child: Container(color:
Colors.blue));
]
);
This might solve your issue.
For overlapping Stack is the widget.
The widgets inside the child scroll view doesn't scroll and throws bottom overflow exception on the screen when there are more widgets in that list view. I am not sure where I am doing a mistake.
home: Scaffold(
body: Column(
children: [
APPbar(),
Container(
color: Colors.grey[200],
child: Expanded(
child: Column(
children: [
searchBar(),
Row(children: casewidgets),
],
)
),
)
SingleChildScrollView(
child:Column(
children: [
Text("a new column"),
Text("a new column"),
Text("a new column"),
Text("a new column"),
],
)
),
]
)),
You can use Expanded on SingleChildScollView to get aviable height, and remove column's Expanded.
home: Scaffold(
body: Column(children: [
// APPbar(),
Container(
color: Colors.grey[200],
child: Column(
children: [
// searchBar(),
Row(children: []),
],
),
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
for (int i = 0; i < 33; i++) Text("a new column"),
],
)),
),
])),
You cannot use expand when using a singlechildscrollview in appropriate way. First you need to understand that expand covers the maximum height and width on the screen or the specific section in which you use expand.
Instead of using SingleChildScrollView, It's easier to use CustomScrollView with a SliverFillRemaining. and it's works work's great.
CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: <Widget>[
const Text('TextData'),
Expanded(
child: Container(
color: Colors.green,
child: Text("Your Text Data",),
),
),
const Text('Add Other Widgets'),
],
),
),
],
),
I'm trying to put a TabBar in the middle of the screen to make a personal area view. Every time I run the code its jumps me up an exception.
The problem comes in the Tabbar the part above is just the name of the user and the Avatar but when I try to put the appbar it throws me this "throw constraintsError;"
Here is the source code which I use to make the view:
class PersonalArea extends StatelessWidget {
#override
Widget build(BuildContext context) {
String _viewSelector = "personalData";
late Color color = Colors.white;
return new Scaffold(
body: StoreConnector<AppState, PersonalAreaViewModel>(
onInit: (store) {
store.dispatch(new GetPersonalAreaAction());
},
converter: (store) => PersonalAreaViewModel.fromStore(store),
builder: (context, viewModel) => Column(children: [
Stack(children: [
Container(
width: double.infinity,
padding: EdgeInsets.only(left: 4, right: 4),
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 2,
child: Column(
mainAxisSize: MainAxisSize.min,children: [
Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
avatar(),
],
),
Align(
alignment: Alignment.topRight,
child: edit(),
)
],
),
//Avatar&Edit
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(top: 12),
child: generateStyleText(
"${FirebaseAuth.instance.currentUser?.displayName}",
color.primary75,
FontWeight.w700,
0,
16,
0),
)
],
),
//Name
]), //MainColumn
),
DefaultTabController(
length: 3,
child: Container(
child: Column(
children: [
TabBar(
tabs: [
Tab(
text: "Experiencia",
),
Tab(
text: "Area",
),
Tab(
text: "pedro",
),
],
indicatorSize: TabBarIndicatorSize.tab,
),
Expanded(
child: TabBarView(
children: [
Text('people'),
Text('Person'),
Text("data"),
],
),
)
],
),
))
],
),
)
])
])));
}
Wrap the DefaultTabController with Expanded
I have a simple code which produces design like this
This is my code
This is my code for the design:
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
],
),
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33)),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
],
),
),
Container(
width: double.infinity,
height: 100,
color: Colors.pink,
)
],
),
);
}
}
Now when I remove the parent expanded widget, I get a design like this:
Here is the code for this design:
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
],
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33)),
),
Row(
children: [
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33),)
),
],
),
Container(
width: double.infinity,
height: 100,
color: Colors.pink,
)
],
),
);
}
}
What is the reason for this? Even if I remove for the parent I have added expanded for the child, so shouldn't it be the same?
ReusableCard:
class ReusableCard extends StatelessWidget{
final Color colour;
ReusableCard({#required this.colour});
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(20)
),
);
}
}
Basically The Expanded widget will expand to all of the remaining height the parent widget have,
So you in the first code, in your body inside the column we have 4 widgets
Expanded(
child: Row(
),
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33)),
),
Expanded(
child: Row(
),
),
Container(
width: double.infinity,
height: 100,
color: Colors.pink,
)
So lets say that the height of the parent widget is 1000, the
height of the container at the end is fixed so it will always take 100, so 900 is left
The three expanded widget in the column will take the remaining 900, and because you did not specify any flex property in the Expanded widget all of them will receive same height so 900/3 = 300 for each widget.
in the second code inside the column you have
Row(
),
Expanded(
child: ReusableCard(colour: Color(0xff1d1e33)),
),
Row(
),
Container(
width: double.infinity,
height: 100,
color: Colors.pink,
)
again assuming the height available is 1000, the container is fixed height of 100 so 900 is left, now the expanded widget will take all of the available height which is 900 because the rows don't have any fixed height.
the Expanded widget inside the Rows will make the card inside them expand to the parent height, but the parent row does not have any height (0 height) so it will expand to this 0 height which is useless.
always keep it in mind that the Expanded will take the height or width from its parent widget.
I want to be able to scroll the DataTable() to view all of the table rows.
Here's my UI:
And here's the code.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
body: Stack(
overflow: Overflow.visible,
children: <Widget>[
// Header & Overlap
Positioned(
...
child: CustomHeaderContainer(),
),
Positioned(
...
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width * 0.9,
height: 50,
),
),
//
// TODO: Make the table below scrollable
Positioned( //*3
...
child: Container( //*2
color: Colors.white,
width: MediaQuery.of(context).size.width * 0.9,
child: DataTable( //*1
columns: [
DataColumn(label: Text('Name')),
DataColumn(label: Text('Year')),
],
rows: [
DataRow(cells: [
DataCell(Text('Dash')),
DataCell(Text('2018')),
]),
DataRow(cells: [
DataCell(Text('Gopher')),
DataCell(Text('2009')),
]),
...
],
),
),
),
],
),
);
}
*Here's what happens if I try to add a SingleChildScrollView:
DataTable: No scroll & no error
Container: No scroll & no error
Positioned: Error, Incorrect use of ParentDataWidget & No scoll
try using a custom scroller with sliver list
CustomScrollView(
slivers: <Widget>[
SliverList(delegate: SliverChildListDelegate([
...children
])),
],
)