How Can I resize image widget relatively?-CodePudding

I want my image resize relatively from parent Containerwidget and defined scale: 0.8,//here in AssetImage() but it doesn't work ? How Can I fix this ?

                      Container(
                        margin: const EdgeInsets.only(top: 30),
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          children: [
                            GestureDetector(
                              onTap: () {
                                print("test");
                              },
                              child: Container(
                                width: 50,
                                height: 50,
                                // color: Colors.green,
                                decoration: const BoxDecoration(
                                  color: Colors.blue,
                                  shape: BoxShape.circle,
                                  image: 
                                  DecorationImage(
                                    fit: BoxFit.fill,
                                    image: AssetImage('images/prop/lock.png'),
                                    scale: 0.8,//here
                                  ),
                                ),
                              ),
                            ),
                            
                          ],
                        ),
                      ),

CodePudding user response：

You can use LayoutBuilder like this:

Container(
        margin: const EdgeInsets.only(top: 30),
        alignment: Alignment.centerLeft,
        child: Wrap(
          children: [
            GestureDetector(
              onTap: () {
                print("test");
              },
              child: Container(
                width: 50,
                height: 50,
                alignment: Alignment.center,
                decoration: const BoxDecoration(
                  color: Colors.blue,
                  shape: BoxShape.circle,
                  
                ),
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    return Image.asset(
                      'images/prop/lock.png',
                      fit: BoxFit.contain,
                      height: constraints.maxHeight * 0.3,
                      width: constraints.maxWidth * 0.3,
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      )

CodePudding user response：

You can Use AspectRatio Class for that use, like this

final double size = MediaQuery.of(context).size.aspectRatio;

CodePudding user response：

You must change fit type to BoxFit.none, like this:

Container(
      margin: const EdgeInsets.only(top: 30),
      alignment: Alignment.centerLeft,
      child: Wrap(
        children: [
          GestureDetector(
            onTap: () {
              print("test");
            },
            child: Container(
              width: 100,
              height: 100,
              // color: Colors.green,
              decoration: const BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
                image: DecorationImage(
                  fit: BoxFit.none,    // change this line
                  image: AssetImage('images/prop/lock.png'),
                  scale: 0.8,
                ),
              ),
            ),
          ),
        ],
      ),
    )