flutter : Text on image in flutter - flutter

Question

I want to write text with transparent color on image. like this.
I want to write text over the image but I am not able to do it properly.
This is my code.
I want to write text over the image but I am not able to do it properly.
And I also want transparent color for text.
Please help me.
import 'package:card_example/color_filters.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static final String title = 'Card Example';
#override
Widget build(BuildContext context) => MaterialApp(
debugShowCheckedModeBanner: false,
title: title,
theme: ThemeData(primarySwatch: Colors.deepOrange),
home: MainPage(title: title),
);
}
class MainPage extends StatefulWidget {
final String title;
const MainPage({
#required this.title,
});
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
padding: EdgeInsets.all(16),
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Stack(
alignment: Alignment.center,
children: [
Ink.image(
image: NetworkImage(
'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
),
colorFilter: ColorFilters.greyscale,
child: InkWell(
onTap: () {},
),
height: 240,
fit: BoxFit.cover,
),
Text(
'Sachin Tendulkar',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
],
),
)
],
),
);
}}
I want to write text over the image but I am not able to do it properly.
And I also want transparent color for text.
Please help me.
If want to use for that container and I use decoration for image text widget for text then how to make exact that thing like is in image.

Answer 1

If you consider splashColor, there are multiple ways to handle this:
using Ink.image() inside Stack will not provide circular borderRadius. Check this GitHub issue. is still open.
ClipRRect(
borderRadius: BorderRadius.circular(12),
child: SizedBox(
width: 300,
height: 300,
child: Stack(
fit: StackFit.expand,
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
padding: EdgeInsets.all(8),
color: Colors.blue.withOpacity(.5),
child: Text(
'Sachin Tendulkar',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
),
),
Ink.image(
image: NetworkImage(
'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
),
fit: BoxFit.cover,
child: InkWell(
borderRadius: BorderRadius.circular(12),
onTap: () {},
),
),
],
)),
);
1: Using GridTile
Container(
width: 300,
height: 300,
color: Colors.transparent,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: InkWell(
onTap: () {},
child: GridTile(
child: Image.network(
'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
fit: BoxFit.cover,
),
footer: Container(
padding: EdgeInsets.all(8),
color: Colors.blue.withOpacity(.5),
child: Text(
'Sachin Tendulkar',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
),
),
),
),
);
2: Using decoration of Container
InkWell(
onTap: () {},
splashColor: Colors.red,
child: Container(
width: 300,
height: 300,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: NetworkImage(
'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
),
fit: BoxFit.cover,
),
),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(.5),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
),
),
padding: EdgeInsets.all(8),
child: Text(
'Sachin Tendulkar',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
),
),
);

Answer 2

Try adding bottomCenter to alignment
Stack(
alignment: Alignment.bottomCenter, //Here
children: [
Ink.image(
image: NetworkImage(
'https://static.remove.bg/remove-bg-web/3661dd45c31a4ff23941855a7e4cedbbf6973643/assets/start_remove-79a4598a05a77ca999df1dcb434160994b6fde2c3e9101984fb1be0f16d0a74e.png',
),
child: InkWell(
onTap: () {},
),
height: 240,
fit: BoxFit.cover,
),
Text(
'Sachin Tendulkar',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
],
);
Result: