Using a transparent PNG image

354

my image simply didnt have alpha

Share:
354
Mark Rotteveel
Author by

Mark Rotteveel

Software developer in Java. Developer of the Firebird JDBC driver Jaybird.

Updated on December 31, 2022

Comments

  • Mark Rotteveel
    Mark Rotteveel 10 months

    I looked everywhere I could and didn't find anything. I want to use a transparent PNG image in a Stack on top of another widget, but the "transparent" part of the PNG is visible. Any idea how to fix that?

    Stack(
      children: [
        Container(
          child: Obx(() => GoogleMap(
                onCameraIdle: _updateCurrentScope,
                myLocationEnabled: true,
                onMapCreated: _onMapCreated,
                markers: _markers,
                initialCameraPosition: CameraPosition(
                  target: controller.cameraCurrentLocation,
                  zoom: 11.0,
                ),
              )),
        ),
        Image(image: AssetImage('assets/map/pin_location.png'),)
      ],
    )
    

    Actual image of my app

    This is the actual result I want to achieve

    • Jake
      Jake about 2 years
      I attempted this with a transparent PNG in my app (Stack with GoogleMap and Image widget just like yours), and couldn't replicate the issue. If your goal is to place a marker on a GoogleMap, I'd recommend using the 'markers' argument to accomplish this. It even lets you choose custom image files using a BitmapDescriptor.
    • Admin
      Admin about 2 years
      That is so weird maybe all the images i have used dont have transparency im gonna keep trying with other images, yes thank you i know about markers, but what i want is a pin that is always at the center of the map and marker doesnt do that (i edited my original post with a new imageto show you what im trying to do)
    • Jake
      Jake about 2 years
      In second thought, you may wish to check if the image you're trying to use has an Alpha channel. An image's Alpha channel handles transparency for said image, if yours doesn't have one, this may be causing the issue. On macOS, you can find this by selecting an image and choosing 'Get Info', not sure how to find it on Windows though, maybe try properties?
    • Admin
      Admin about 2 years
      yes my image just hadnt alpha ty !
    • Jake
      Jake about 2 years
      Good to hear you solved it!