How To Create Transparent Background Image With Flutter

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

You could give your DecorationImage a ColorFilter to make the background image grey

How To Create Transparent Image In Flutter App

Transparent Image Decoration In flutter 

You Can add this Transparent Image Code:

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    new Card(
      child: new 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 AssetImage('assets/images/img.png',),

          ),
        ),
      ),
    ),
  ],
),


Complete Code for Transparent Image In Flutter
Main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.indigo,
        title: Text('Image Faded/Transparent'),
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          new Card(
            child: new 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 AssetImage('assets/images/img.png',),

                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Related Post