Question 160535 in Flutter Question posted in
The official Flutter documentation can be found here.

How to position a background image in Flutter?

enter image description here

I want to achieve desired UI as shown in above Screen shot, in it there is a gradient background color which is no problem but there are background pics like cresent, I have cresent pic in png but i can’t figure how to display it at bottom left, this has to be a background image as there will be text that might be over it.

Tags:

3

Answers


  1. 0

    You can play with RadialGradient parameters

    Widget build(BuildContext context) {
  return Center(
    child: Container(
      height: 200,
      width: 400,
      decoration: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment.bottomRight,
          radius: 1.5,
          colors: [
            Colors.pink.withAlpha(100),
            Colors.pink.withAlpha(200),
          ],
        ),
      ),
    ),
  );
}

    enter image description here

    Login or Signup to reply.
  2. 0

    inside container with desired height, width and grid background, you can use Positioned or Align widget as child of container.

    https://api.flutter.dev/flutter/widgets/Positioned-class.html
    https://api.flutter.dev/flutter/widgets/Align-class.html

    Login or Signup to reply.
  3. 0

    Here is your Card with Gradiant and your Background Image Alignment in bottomLeft don’t forget to change asset

                 Container(
                height: 200,
                decoration: BoxDecoration(
                  borderRadius: 
                  BorderRadius.circular(10),
                  image: const DecorationImage(
                      alignment: 
                      Alignment.bottomLeft,
                      image: 
                     AssetImage(AppAssets.logo)),
                  gradient: RadialGradient(
                    center: 
                    Alignment.bottomRight,
                    radius: 1.5,
                    colors: [
                      Colors.pink.withAlpha(100),
                      Colors.pink.withAlpha(200),
                    ],
                  ),
                ),
              ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search