How to remove white background in picture? - flutter

Question

Design I want:
My current design:
How to make the letter back to normal color?
My code:
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Stack(
children: [
Image.asset(
'assets/images/front_Page_Image.png',
height: 746,
width: constraints.maxWidth * 0.64,
fit: BoxFit.cover,
),
Image.asset(
'assets/images/half_circle.png',
color: Color.fromARGB(255, 255, 255, 255),
//colorBlendMode: BlendMode.srcOver,
)
],
),
],
),

Answer 1

You can use Opacity with color as below for transparent white background
color : Colors.white.withOpacity(0.5)
For image Opacity :
Container(
child: new Text(
'Hello world',
style: Theme.of(context).textTheme.display4
),
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
image: new NetworkImage(
'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
),
),
),
),

Answer 2

It is required that the image you want to "remove the background" for, is transparent except for the text. Meaning what you'd like to remove the white for, is actually the Containers background. Meaning that you can use something like Colors.white.withOpacity(0.3) to achieve the transparency.
A complete example that will produce this image:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Stack(
children: [
Card(
child: Image.asset('assets/this_is_fine.jpg'),
),
Container(
width: MediaQuery.of(context).size.width * 0.5,
color: Colors.white.withOpacity(0.3),
child: Image.asset('assets/fine_text.png'),
)
],
)
],
),
);
}
}

Answer 3

I think you shouldn't wrap them in a Card. The first Container also serves no purpose. So like
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Stack(
children: [
Image.asset(
'assets/images/front_Page_Image.png',
height: 746,
width: constraints.maxWidth * 0.64,
fit: BoxFit.cover,
),
Container(
alignment: Alignment.topLeft,
child: Image.asset(
'assets/images/half_circle.png'),
)
],
),
],
)