Make BoxDecoration image faded/transparent

Question

I have the following snippet of code and I would like to make the image faded such that it does not interfere with other items in the container. Is there a filter that could

Answer 1

You can simply use a Stack widget and use a simple coloured container above the image with reduced opacity.

EG :

        import 'package:flutter/material.dart';
        import 'package:flutter/widgets.dart';
        import 'package:flutter/rendering.dart';

        import './page2.dart';
        import './page3.dart';
        import './page4.dart';

        void main() {
          debugPaintSizeEnabled = true ;
          return runApp(Start());
        }

        class Start extends StatelessWidget {

          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return MaterialApp(
              title: 'InIt',
              home: Builder(builder: (context) {
                return GestureDetector(
                  onTap: () {
                    return Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (BuildContext context) {
                          return Page2();
                        },
                      ),
                    );
                  },
                  child: Scaffold(
                    body: Stack(
                      children: [

                        Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage('images/page1.jpg'),
                                fit: BoxFit.fitHeight),
                          ),
                        ),
                        Container(
                          color: Color.fromRGBO(255, 255, 255, 0.19),
                        ),
                        Container(
                          alignment: Alignment.center,
                          child: Center(
                            child: Text(
                              'LETS BE PRODUCTIVE TODAY',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 50.0,
                                  fontFamily: 'bold',
                                  fontWeight: FontWeight.bold,
                                  color: Color.fromRGBO(255, 255, 255, 1)),
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(bottom: 10.0),
                          alignment: Alignment.bottomCenter,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              RawMaterialButton(
                                onPressed: () {},
                                constraints:
                                    BoxConstraints.tightFor(height: 10.0, width: 10.0),
                                shape: CircleBorder(),
                                fillColor: Colors.white,
                              ),
                              Page2call(),
                              Page3call(),
                              Page4call(),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                );
              }),
            );
          }
        }

        class Page2call extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return RawMaterialButton(
              onPressed: () {
                return Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return Page2();
                    },
                  ),
                );
              },
              constraints: BoxConstraints.tightFor(height: 10.0, width: 10.0),
              shape: CircleBorder(),
              fillColor: Colors.white,
            );
          }
        }

        class Page3call extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return RawMaterialButton(
              onPressed: () {
                return Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return Page3();
                    },
                  ),
                );
              },
              constraints: BoxConstraints.tightFor(height: 10.0, width: 10.0),
              shape: CircleBorder(),
              fillColor: Colors.white,
            );
          }
        }

        class Page4call extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return RawMaterialButton(
              onPressed: () {
                return Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return Page4();
                    },
                  ),
                );
              },
              constraints: BoxConstraints.tightFor(height: 10.0, width: 10.0),
              shape: CircleBorder(),
              fillColor: Colors.white,
            );
          }
        }

This is a fully practically implemented example. You can increase the opacity over here to make the background even more faded, the fourth argument is for opacity:

Container(
                color: Color.fromRGBO(255, 255, 255, 0.19),
         ),

This method also gives u the ability to chose the colour of the fading filter.