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

What should I do with Flutter?

Column(
                children: <Widget>[
                  SizedBox(height: 10),
                  Text(
                    "No Transactions Yet!!",
                    style: Theme.of(context).textTheme.headline6,
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    alignment: Alignment(0, 0),
                    height: 240,
                    child: Image.asset('assets/images/wait.png',
                        fit: BoxFit.cover),
                  ),
                ],
              )

this is a part of my flutter code, I have downloaded a png file and edited that picture so that it can have white background, now my problem is, it is not getting matched with the background of my App’s Background (background color is white) . It is like a pasted picture onto the screen . How to fix this.
I am giving the picture try to see that in different directions so that you can understand my problem.
enter image description here

I have tried like this

Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/wait.jpg"),
            fit: BoxFit.cover,
          ),
        ),

here the photo was zoomed in.

Tags:

3

Answers


  1. 0

    seems now ur background color is Color(0xfffefefe) change it to Color(0xffffffff)

     Scaffold(
        backgroundColor: Color(0xffffffff),
      body:.....
    )
    Login or Signup to reply.
  2. 0

    For this you need to set your Scaffold background color to Colors.white.

    Scaffold(
 backgroundColor: Colors.white
 body: Column(
    children: <Widget>[
     SizedBox(height: 10),
     Text(
       "No Transactions Yet!!",
      style: Theme.of(context).textTheme.headline6,
     ),
     SizedBox(
       height: 20,
     ),
     Container(
       alignment: Alignment(0, 0),
       height: 240,
       child: Image.asset('assets/images/wait.png',
        fit: BoxFit.cover),
     ),
   ],
 )

    )

    Login or Signup to reply.
  3. 0

    If you want the image to blend seamlessly with the white background of your app, you can try the following approaches:

    Remove the White Background: Instead of manually editing the image to have a white background, consider removing the background altogether. Save the image with a transparent background (e.g., in PNG format), preserving only the main subject of the image.

    Use a Transparent PNG: If your image already has a transparent background, make sure to save it as a PNG file. This file format supports transparency, which allows the image to blend well with any background color.

    Set Background Color of Container: Instead of relying on the fit: BoxFit.cover property, you can set the background color of the Container to white explicitly.

    This ensures that the image is displayed on a white background. Here’s an example:
    dart

    Container(
  color: Colors.white, // Set the background color to white
  child: Image.asset('assets/images/wait.png'),
),

    Adjust Image Alignment: You can adjust the alignment of the image within the Container to center it horizontally and vertically.

    Modify the alignment property of the Container to achieve this:
    dart

    Container(
  color: Colors.white,
  alignment: Alignment.center, // Center the image within the Container
  child: Image.asset('assets/images/wait.png'),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search