Reputation: 203
How to place image & textfield both at center in flutter.
Below is code what i have tried so far any help is appreciated!
Container(
child: Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Image.asset(
'images/Warning.png',
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
alignment: Alignment.center,
child: Text(
'OTP is valid for 5 minutes only.',
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular',
),
),
),
),
],
),
),
),
trying as some thing shown in the picture both text & image is in same line any help is appreciated!
Upvotes: 1
Views: 371
Reputation: 63594
Simple way of doing it by using RichText
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: [
WidgetSpan(child: Icon(Icons.ac_unit)), // use image in your case instead of icon
TextSpan(text: "This is Text")
]))
Full Snippet
Container(
child: Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Text.rich(TextSpan(
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular'),
children: [
WidgetSpan(
child: Image.asset(
'images/Warning.png',
alignment: Alignment.center,
),
),
WidgetSpan(
child: SizedBox(
width: 10,
)),
TextSpan(
text: 'OTP is valid for 5 minutes only.',
),
],
)),
),
),
Upvotes: 1
Reputation: 3514
Give your image a size and you will get your result
Container(
child: Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Image.network(
'http://orbitsystemsinc.com/images/banner-round-bg.png',width: 40,height: 40,
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
alignment: Alignment.center,
child: Text(
'OTP is valid for 5 minutes only.',
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular',
),
),
),
),
],
),
),
)
Upvotes: 0