Home > Mobile >  I Want to show the image in Decoration Image of a container
I Want to show the image in Decoration Image of a container

Time:06-25

I Want to show the image (image1) in Decoration Image of a container.

InkWell(
                          onTap: (() async {
                            image1 = (await _picker.pickImage(
                                source: ImageSource.gallery));
                          }),
                          child: Container(
                              height:
                                  MediaQuery.of(context).size.width / 4 - 25,
                              width: MediaQuery.of(context).size.width / 4 - 25,
                              decoration: BoxDecoration(
                                color: Colors.blue.shade900,
                                borderRadius: BorderRadius.circular(5),
                                // Decoration image in here (image1) 
                              ),
                              
                        ),

CodePudding user response:

Using a nullable variable for decoration image on state class. Also container decoration image can take null.

  DecorationImage? decorationImage;

Make sure to import

import 'dart:io';
import 'package:flutter/foundation.dart';
InkWell(
  onTap: () async {
    XFile? image1 =
        await _picker.pickImage(source: ImageSource.gallery);
        
    if (image1 == null) {
      debugPrint("got null");
      return;
    }
    final image = Image.memory(await image1.readAsBytes());
    decorationImage = DecorationImage(
      fit: BoxFit.fitWidth,
      image: image.image,
    );
    setState(() {});
  },
  child: Container(
    height: MediaQuery.of(context).size.width / 4 - 25,
    width: MediaQuery.of(context).size.width / 4 - 25,
    decoration: BoxDecoration(
      color: Colors.blue.shade900,
      borderRadius: BorderRadius.circular(5),
      image: decorationImage,
    ),
  ),
),

CodePudding user response:

    if (image1 != null) ...{
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image:  FileImage(
                File(image1!.path),
              ),
            ),
          ),
        ),
      }else...{
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('empty_image_path.jpg'),
            ),
          ),
        ),
      }
  • Related