Flutter design height of image

ThatGuy1234
June 13, 2023
190 views
1 vote
2 Answers

i am new to flutter and i am trying to make this screen:

What i have now is :

i tried everything to make the image look like the example but no success, played with containers height, AspectRatio. also i dont understand how to have empty space betwwen the price and zipcode like the example.

Hope someone can help me out. thanks all

My code:

body: ListView.builder(
          itemCount: houses.length,
          itemBuilder: (context,index){
            final hous = houses[index];
            String baseurl = '';
            return Container(
              color: const Color(0xFFEBEBEB),
              height: 130.0,
              child: Padding(
                padding: const EdgeInsets.only(left:10.0,top:5.0,right:10.0,bottom: 5.0),
                child: Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0)
                  ),
                  color: Colors.white,
                  child: Container(
                    // height: 120.0,

                    child: ListTile(
                      // contentPadding: EdgeInsets.zero,
                      leading: Container(
                        width: 120,
                        height: 1220,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: Container(
                            // height: double.infinity, // Set the height to fill the available space
                            child: Image.network(
                              Uri.parse(baseurl).resolve(hous['image']).toString(),
                              fit: BoxFit.cover,
                              alignment: Alignment.centerLeft,
                            ),
                          ),
                        ),
                      ),
                      title: Row(
                        children: [
                          const Text('$'),
                          Text(hous['price'].toString()),
                        ],
                      ),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              const SizedBox(height: 20),
                              Text(hous['zip']),
                              Text(hous['city']),SizedBox(height: 8,)
                            ],
                          ),
                          Row(
                            children: [
                              SvgPicture.asset('assets/icons/ic_bed.svg',),
                              Text(hous['bedrooms'].toString()),
                              SizedBox(width: 10),//width for space betweens icons
                              SvgPicture.asset('assets/icons/ic_bath.svg'),
                              Text(hous['bathrooms'].toString()),
                              SizedBox(width: 10),
                              SvgPicture.asset('assets/icons/ic_layers.svg'),
                              Text(hous['size'].toString()),
                              SizedBox(width: 10),//
                              SvgPicture.asset('assets/icons/ic_location.svg'),
                              Text('km'),
                            ],
                          )
                        ],
                      ),
        ),
                  ),
                ),
              ),
            );
      })

Tags: flutter flutter-dependencies

Answers

Card Design using Row and Column:

Widget customCard() {
  return Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
    child: Container(
      padding: const EdgeInsets.all(15),
      child: Row(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10.0),
            child: Image.network(
              'https://images.pexels.com/photos/106399/pexels-photo-106399.jpeg?cs=srgb&dl=pexels-binyamin-mellish-106399.jpg&fm=jpg',
              height: 100.h,
              width: 100.h,
              fit: BoxFit.cover,
            ),
          ),
          SizedBox(width: 13.w),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const Text(
                '$45,000',
              ),
              SizedBox(height: 8.h),
              const Text(
                '1011KH Raamgrach',
              ),
              SizedBox(height: 40.h),
              const Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // Use Row to show Icon with Text
                  Text(
                    'Bed : 1',
                  ),
                  Text(
                    'Bath : 1',
                  ),
                  Text(
                    'Area : 1',
                  ),
                  Text(
                    'Location : 1',
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

You can use this widget for your images. Just change the image source and you can use it.

  Card(
                        margin: const EdgeInsets.all(10.0),
                        elevation: 0,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                        semanticContainer: true,
                        clipBehavior: Clip.antiAliasWithSaveLayer,
                        child: Image.network(
                          "https://picsum.photos/200/300",
                          fit: BoxFit.fill,
                          height: 100,
                          width: 100,
                        ),
                      ),

Please signup or login to give your own answer.

Click here to cancel reply.