Search code examples
flutterflutter-layout

How Can I resize image widget relatively?


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
                                  ),
                                ),
                              ),
                            ),
                            
                          ],
                        ),
                      ),

Additional comment I think LayoutBuilder() doesn't work appropriately. enter image description here

                      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,
                                ),
                                child: LayoutBuilder(
                                  builder: (context, constraints) {
                                    return Image.asset(
                                      'images/prop/lock.png',
                                      fit: BoxFit.none,
                                      height: constraints.maxHeight * 0.1,
                                      width: constraints.maxWidth * 0.1,
                                    );
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

Solution

  • 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,// important part
                    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,
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          )
    

    enter image description here