Flutter - Responsive Container with Image, Title & Description

main.dart

// @author OMi Shah
// @email [email protected]
// @organization CodeCyan
// @website www.codecyan.com

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Demo App', home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    return Scaffold(
        body: IntrinsicHeight(
            child: Container(
      margin: EdgeInsets.all(
          8.0), // just to make the contianer stand out, you can remove it

      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.yellow),
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
              fit: BoxFit.cover,
              height:
                  width * 0.25, // 25% of screen width
              width: width * 0.25,
            ),
          ),
          SizedBox(width: 15),
          Expanded(
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                Text(
                  'product.name',
                  style: TextStyle(fontSize: 17),
                ),
                Align(
                    alignment: Alignment.centerRight,
                    child: Wrap(direction: Axis.vertical, children: [
                      Text(
                        'Rs200',
                        style: TextStyle(
                            fontSize: 17, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        'Rs300',
                        style: TextStyle(
                            decoration: TextDecoration.lineThrough,
                            fontSize: 17,
                            color: Colors.blueGrey),
                      ),
                    ]))
              ])),
        ],
      ),
    )));
  }
}