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

Flutter – Image size issue

I am creating food app ui, i created card of buttons with images, now i have a problem with size of images in my buttons, they all have same height, width, padding and image size but different text wrap so they return different image scale. I already tried to make it on desired size, didn’t help

class PopularCards extends StatelessWidget {
  PopularCards({
    super.key,
    // required this.image,
    required this.name,
    required this.image,
  });

  // Image image;
  String name;
  String image;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 10),
      child: Container(
        width: 110,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                offset: Offset(0, 3),
              )
            ]),
        child: Column(
          children: [
            Expanded(
              child: ConstrainedBox(
                constraints: BoxConstraints.expand(),
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      minimumSize: Size.fromHeight(40),
                      backgroundColor: Colors.white
                    ),
                onPressed: () {
                  print('Hey');
                },
            child: Image.asset(image)),
              )
              ),
            Text(name, style: TextStyle(fontSize: 14)),
          ],
        ),
      ),
    );
  }
}

enter image description here

Tags:

3

Answers


  1. 0 
    class PopularCards extends StatelessWidget {
PopularCards({
Key? key,
required this.name,
required this.image,
}) : super(key: key);

String name;
String image;

 @override
 Widget build(BuildContext context) {
 return Padding(
  padding: EdgeInsets.symmetric(vertical: 10),
  child: Container(
    width: 110,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          offset: Offset(0, 3),
        ),
      ],
    ),
    child: Column(
      children: [
        Expanded(
          child: ConstrainedBox(
            constraints: BoxConstraints.expand(),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                minimumSize: Size.fromHeight(40),
                backgroundColor: Colors.white,
              ),
              onPressed: () {
                print('Hey');
              },
              child: Container(
                height: 80, // Set the desired height
                width: 80, // Set the desired width
                padding: EdgeInsets.all(10), // Set the desired padding
                child: Image.asset(
                  image,
                  fit: BoxFit.cover, // Adjust the image's fit
                ),
              ),
            ),
          ),
        ),
        Text(name, style: TextStyle(fontSize: 14)),
      ],
    ),
  ),
 );
 }
 }

    Try this code, wrap the image in a container and give the container height and width.

    Login or Signup to reply.
  2. 0

    Try to give the Container height and width with:

    MediaQuery.of(context).size.width/height
    Login or Signup to reply.
  3. 0

    create a custom button with onTap function and image child
    then call the custom button in a row

    code for custom button

        import 'package:flutter/material.dart';

class customButton extends StatelessWidget {
  final String imagePath;
  final Function()? onTap;
  final String name;
  const customButton({
    super.key,
    required this.imagePath,
    required this.onTap,
    required this.name,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Image.asset(
              imagePath,
              height: 50,
            ),
          ),
          Text(name)
        ],
      ),
      
    );
  }
}

    the showing page is

    import 'package:custom_button/custom_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      customButton(imagePath: 'assets/images/download1.jpeg', onTap: (){},name: 'food1',),
                      customButton(imagePath: 'assets/images/download2.jpeg', onTap: (){},name: 'food2',),
                      customButton(imagePath: 'assets/images/images.jpeg', onTap: (){},name: 'food3',),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      customButton(imagePath: 'assets/images/download1.jpeg', onTap: (){},name: 'food1',),
                      customButton(imagePath: 'assets/images/download2.jpeg', onTap: (){},name: 'food2',),
                      customButton(imagePath: 'assets/images/images.jpeg', onTap: (){},name: 'food3',),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search