How to to display text over the images in Flutter?
try this
Container(
child: Center(child: Text('test'),),
height: 190.0,
width: MediaQuery.of(context).size.width - 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue,
image: DecorationImage(
image: new NetworkImage(
"https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_03.jpg"
),
fit: BoxFit.fill
)
),
),
Just want to add a small example of Stack Widget
return Scaffold(
appBar: AppBar(
title: Text("Text Over Image"),
),
body: Center(
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.center,
child: Image.network(
'https://cdn.pixabay.com/photo/2018/07/11/21/51/toast-3532016_1280.jpg',
height: 250,
width: double.infinity,
fit: BoxFit.cover,
),
),
Container(
alignment: Alignment.center,
child: Text(
'Text Message',
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22.0),
)),
],
),
),
);
Output:
You can read more in my article on medium.com
You can use a Stack widget for that:
Stack(
children: <Widget>[
yourImageWidget,
Center(child: Text("someText")),
]
)
PhotosList class:
PhotosList({Key key, this.photos}) : super(key: key);
@override
Widget build(BuildContext context) {
return _buildBody();
}
Widget _buildBody() {
return new ListView.builder(
itemCount: photos.length,
itemBuilder: (context,int){
return Stack(
children: <Widget> [
new CachedNetworkImage(imageUrl: photos[int].url),
Center(child: Text(photos[int].title)),
]
);
}
);
}
}
I find this worked a bit better and you don't need the Center widget:
Stack(
alignment: Alignment.center,
children: <Widget>[
yourImageWidget,
Text("someText"),
]
)