1. Centering child to the parent container
If don't want your child container takes up all the space in your parent container or you want the child container to be in a certain position then you should wrap your child container with Center or Align widget.
Container(
height: 320,
child: PageView.builder(
controller: PageController(viewportFraction: 0.88),
itemCount: 4,
itemBuilder: (_, i){
return GestureDetector(
child: Align(
alignment: Alignment.topCenter,
child: Container(
padding: const EdgeInsets.only(left: 20, top: 20),
height: 220,
width: MediaQuery.of(context).size.width-20,
margin: const EdgeInsets.only(right: 10),
),
),
);
}),
),If you remove the Align widget, the child widget will take all the space. Instead of Align widget you can also wrap your child widget using Center widget to get the same result.
2. Container takes the availble space in the row
If you want your container to take all the available space in a row, wrap your container around expanded widget in side the row. Then it will take all the available space.
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(
element.toString()
)
)
),
),
Expanded(
child: Container(
height: 80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
bottomRight: Radius.circular(20)
)
)
),
)
],
)You see the above code second container is wrapped around Expanded widget. And this takes the available space.
3. Scrollable widget inside Stack widget
In general you can not scroll inside positioned widget. So you can not scroll inside Stack widget since positioned widgets are placed inside Stack widget.
But we can use a trick. We can use ListView.builder and put the ListView inside a Container. And this container can be inside a Positioned widget.
Positioned(
child:Container(
width: 350,
height: 300,
child:
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(
itemCount: 1,
itemBuilder: (_, index){
return DescriptionTextWidget(text: "The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if. The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if");
// DescriptionTextWidget(text: "The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if. The pasta is the picutre UEES alkine noodles, whichy many people are not very familiary with. The sauce is also very popular with the local people if");
}),
),
)
)Another approach is to wrap your widget around, SingleChildScrollView and wrap SingleChildScrollView within Expanded, wrap Expanded within Column widget and wrap Column within Container. Container must have a width and height.
4. Flutter Stack and Positioned Widget Scrollable
We will learn how to make flutter stack and positioned widget scrollable. There are two ways you can flutter stack positioned widget scrollable. First one by setting left, right, top and bottom value. You can set them whatever value you want and then you will see the child widget inside it, is scrollable. The other way, you can set height to your child widget. Then it will make the positioned widget scrollable for child widget.
5. Flutter TextOverflow Ellipsis Does Not Work
Flutter TextOverflow solve using ellipsis for column and expanded widgets. You will learn how to show dots or ellipsis for text widget in container. Text widget could be wrapped inside column or other widget. The solution is to use wrap text widget inside row or column widget. Then wrap the row or column widget using expanded or flexible widget. If your ellipsis are not working, it means you are not wrapping it around column and expanded widget. Wrapping your text widget inside column is a must thing to do.
Flutter heroTag
About this tag, not many people know. But it's extremely important if you have multiple floating action buttons. If you don't use heroTag, you will get the below error.
There are multiple heroes that share the same tag within a subtree
To get rid of this error, you the like below
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
heroTag: "heroTag1",
onPressed: () =>
BlocProvider.of<AppBlocs>(context).add(Increment()),
tooltip: 'Increment',
child: const Icon(Icons.add),
),
FloatingActionButton(
heroTag: "heroTag2",
onPressed: () =>
BlocProvider.of<AppBlocs>(context).add(Decrement()),
tooltip: 'Decrement',
child: const Icon(Icons.remove),
)
],
),You may use any names for the tags.
Flutter AppBar underline
Learn how to draw underline in flutter app. To draw underline we can use bottom property with PreferredSized widget
AppBar(
backgroundColor:Colors.white,
elevation:0,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(1.0),
child: Container(
color: Colors.grey.withOpacity(0.5),
//height defines the thickness of the line
height: 1.0,
),
),
title: Text(
"Log In",
style: TextStyle(
color: Colors.black, fontSize: 16.sp, fontWeight: FontWeight.normal),
),
);bottom property will draw a line for us but we still need to set backgroundColor and elevation. I set backgroundColor to white and elevation to 0.
Thus I can see the underline.
