I'm a newbie in flutter and I'm trying to code a UI Instagram clone, How can I align a carousel indicator to the center with a Row()
parent like this
Stack(
alignment: Alignment.center,
children:[
buildIndicator(),
//Icon section
Row(
children:[
buildLeftIcons(),
buildRightIcon(),
],
),
],
),
Result I got: ![final result][this]
Hey you can use Spacer() between icons and dot in row children . Spacer widget auto take extra width like below -
Row(
children: [
Icon(),
Icon(),
Icon(),
Spacer(),
DotsIndicator(),
Spacer(),
],
),
Here is another example with Expanded
widget and row, Expanded will automatically take rest of width other then icons
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(),
Icon(),
Icon(),
Expanded(
child: Center(
child: DotsIndicator(),
)
),
],
),
// UI with left and right icons
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(),
Icon(),
Icon(),
Expanded(
child: Center(
child: DotsIndicator(),
)
),
Icon(),
],
),
在该行中,您可以在范围内提供一个SizedBox(width: )
以将特定小部件推送一定距离。
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
///put favourite,comment,send icon here
],
),
///put yor indicator widget here
Indicator(),
///add an empty container here
Container()
],
)
It would somehow complex to do that but I have two suggestions:
Row()
's MainAxisAlignment.start
then add a desired Widget in between the first widgets and the indicators to give space say like a SizedBox(width:80.0)
Column()
. I prefer this since I would just add the carousel indicator as first item in the column then wrap it in a Center()
widget, then the second widget in the column would be your desired widgets(favourite, message and comments icons)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.