This is flutter app tutorial for beginners for training app step by step using a complex UI with getx package for navigation. We covered how to make complex app ui using container and stack widget.
Get the starter code from the link below
https://www.dbestech.com/video_player_app.zip
You will also learn how to use overflowbox widget to draw complex ui shape to get rid of padding and margin. If you have margin around your parent container or widget, you can use overflowbox to get rid of the margin for child container or widget.
Check out https://www.patreon.com/dbestech to get the full access to the code and assets.
Other getx tutorial https://youtu.be/M0OwOYPFkrM
We have three complex ui sections in the app
1. on the home page we have the container using different borders and the container itself contains other widgets both in row and column
2. On the home page we have two images on each other, like overlapping. and Images sizes are different.
3. On the home we have two rows with two columns. In general in flutter we can not put two rows and columns next to each other. Two do that we used our own algorithms.
Important widgets used here are
1. container widget
2. stack widget
3. scaffold widget
4. boxdecoration
5. row and column widget
6. decorationImage
7. listview builder
8. getx navigation
We also covered how to put two columns next to each other using our algorithm.
The algorithm is given below
int a = 2*i;
int b= 2*i+1;
using the above algorithm we can put two columns next to each other.
You should run the algorithm in a for loop If you have four items in your list then run it two times, if you have fifty items in your list then run it 25 times, you get the idea.
If your items number is odd number you can check the length first.
ListView.builder(
itemCount: (info.length.toDouble()/2).toInt(), //2
itemBuilder: (_, i){
int a = 2*i; //0, 2,
int b = 2*i +1; //1, 3
int c=b;
if(info.length.isOdd&&(i+1)==info.length){
c=length;
b=c;
}
return Row(
children: [
Container(
width: (MediaQuery.of(context).size.width-90)/2,
height: 170,
margin: EdgeInsets.only(left:30,bottom: 15, top:15),
padding: EdgeInsets.only(bottom: 5),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage(
info[a]['img']
)
),
boxShadow: [
BoxShadow(
blurRadius: 3,
offset: Offset(5, 5),
color: color.AppColor.gradientSecond.withOpacity(0.1)
),
BoxShadow(
blurRadius: 3,
offset: Offset(-5, -5),
color: color.AppColor.gradientSecond.withOpacity(0.1)
)
]
),
child: Center(
child:Align(
alignment: Alignment.bottomCenter,
child: Text(
info[a]["title"],
style: TextStyle(
fontSize: 20,
color:color.AppColor.homePageDetail
),
),
)
),
),
if(c!=0) Container(
width: (MediaQuery.of(context).size.width-90)/2,
height: 170,
margin: EdgeInsets.only(left:30, bottom: 15, top:15),
padding: EdgeInsets.only(bottom: 5),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage(
info[b]['img']
)
),
boxShadow: [
BoxShadow(
blurRadius: 3,
offset: Offset(5, 5),
color: color.AppColor.gradientSecond.withOpacity(0.1)
),
BoxShadow(
blurRadius: 3,
offset: Offset(-5, -5),
color: color.AppColor.gradientSecond.withOpacity(0.1)
)
]
),
child: Center(
child:Align(
alignment: Alignment.bottomCenter,
child: Text(
info[b]["title"],
style: TextStyle(
fontSize: 20,
color:color.AppColor.homePageDetail
),
),
)
),
):Container(),
],
);
})
