I want to make a button, In this button I want a text and icon both but text should be in center and icon will be right side.
this is code of button.
bottomNavigationBar: Padding(
padding:
const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: FlatButton(
onPressed: () {
_controller.nextPage(
duration: const Duration(milliseconds: 200),
curve: Curves.easeIn,
);
if(_currentPage 1 == splashData.length){
Navigator.push(context,
MaterialPageRoute(builder: (context) => HomePage()));
}
},
child: Row(mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Next",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
SizedBox(width: 50,),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Icon(Icons.arrow_forward,color: whiteColor,),
)
],
),
color: skyBlue,
),
),
),
I want like this button
CodePudding user response:
Try below code, used Opacity
widget and set opacity:0
Note: Don't used FlatButton
its depricated by Flutter used instead of ElevatedButton
, TextButton
CodePudding user response:
You can use Stack instead of Row to achieve easily. Inside Stack you can use Positioned(right: 10, child: Icon()) also.
Stack(
alignment: Alignment.center,
children: const [
Text(
'Next',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.arrow_forward, color: Colors.white,),
)
],
)
We have more than two ways to achieve it. I have given two easiest option to achieve it.
CodePudding user response:
You can use Expanded
(and play with the flex
property if needed).
Also add an Align
For instance:
Row(mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(),
Expanded(
child: Text(
"Next",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 10),
child: Icon(Icons.arrow_forward,color: whiteColor),
),
),
),
],
),