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

How to position image accurately in flutter

I am following a tutorial from youtube and not able to position image as shown in the image below.

I want to achieve this

My current state is shown here My current state

  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: onTap,
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Row(
              children: [
                Expanded(
                    child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Food text
                    Text(food.name),
                    Text(
                      '$' + food.price.toString(),
                      style: TextStyle(
                          color: Theme.of(context).colorScheme.primary),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Text(
                      food.description,
                      style: TextStyle(
                          color: Theme.of(context).colorScheme.inversePrimary),
                    ),
                  ],
                )),

                // const SizedBox(
                //   width: 15,
                // ),

                // Food image
                Image.asset(
                  food.imagePath,
                  height: 120,
                  width: 120,
                ),
              ],
            ),
          ),
        ),

What am I missing here?

Tags:

2

Answers


  1. 0

    To make sure your image scales properly and has smooth, polished edges when you add rounded corners, you can use the ClipRRect widget in Flutter. By setting the clipBehavior property to Clip.antiAlias, you’ll get smoother edges, which makes the overall look more refined.

    Here’s an example of how you can do this:

    ClipRRect(
  borderRadius: BorderRadius.circular(15.0), // Adds rounded corners
  clipBehavior: Clip.antiAlias, // Ensures smooth edges
  child: Image.asset(
    'assets/images/sample.jpg',
    height: 120, // Sets the image height
    width: 120,  // Sets the image width
    fit: BoxFit.cover, // Ensures the image scales correctly
  ),
),
    Login or Signup to reply.
  2. 0

    Try

    Image.asset(
  food.imagePath,
  height: 120,
  width: 120,
  fit: BoxFit.cover, 
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search