Flutter Text With Transparent Background On Image

Let’s learn how to use transparency with text background with Image as background.

We will use Color.fromARGB to achieve transparency on image. We will use Color.ARGB inside container and a child a Text. So the text will have transparent background.

Color.fromARGB

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Transparent Background Color"),
             backgroundColor: Colors.redAccent.withOpacity(0.5),
                              //0.5 is transparency 
          ),
          body: Container(
             color: Colors.redAccent,
             child: Stack( 
                 children: [
                     Image.asset("assets/images/elephant.jpg"),
                     Container( 
                        width: double.infinity,
                        color: Color.fromARGB(100, 22, 44, 33),
                        margin: EdgeInsets.all(20),
                        padding: EdgeInsets.all(40),
                        child: Text("Hello Everyone! This is FlutterCampus",
                             style: TextStyle(fontSize: 25, color: Colors.white),),
                     ),
                 ],
             ),
          )
       );
  }
}