I want to make responsive card which should be work any mobile. I have shared Two screenshot 1st is of my mobile and second screen shot of client's mobile. I want to make UI like my mobile for all mobile screen but how to do it did not understand.

This is my card code.

import 'package:cwc/constants/constants.dart';
import 'package:cwc/ui/video/video_player.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class VideoComponentPurple extends StatelessWidget {
  final cwcVideoListData;
  const VideoComponentPurple({Key? key, this.cwcVideoListData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(18, 5, 18, 5),
      child: GestureDetector(
        onTap: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => VideoApp(cwcVideoListData:cwcVideoListData)));
        },
        child: Container(
          height: 234,
          width: 260,
          decoration: BoxDecoration(
            color: const Color(0xFFC691D3).withOpacity(0.25),
            // color:  Colors.red,
            borderRadius: const BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 145,
                  width: 300,
                  decoration: BoxDecoration(
                    color: const Color(0xFFC691D3).withOpacity(0.25),
                    // color:  Colors.red,
                    borderRadius: const BorderRadius.all(
                      Radius.circular(10),
                    ),
                    image:  DecorationImage(
                      image: NetworkImage('${cwcVideoListData["coverImage"]}'),
                      fit: BoxFit.cover,
                    ),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [

                      Center(
                        child: Center(
                          child: Container(
                            height: 45,
                            width: 45,
                            decoration: BoxDecoration(
                              image: const DecorationImage(
                                image: AssetImage('assets/play_icon.png'),
                                fit: BoxFit.cover,
                              ),
                            ),),
                        )
                      ),
                      
                    ],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                 Text(
                   '${cwcVideoListData["title"]}',
                   style: GoogleFonts.poppins(
                       fontWeight: FontWeight.w600,
                       fontSize: 14,
                       color: Color(0xFF444444)),
                 ),
                 Text(
                   '${cwcVideoListData["description"]}',
                   style: GoogleFonts.poppins(
                       fontSize: 12, color: Color(0xFF444444)),maxLines: 2,
                 ),
               ],)
                
              ],
            ),
          ),
        ),
      ),
    );
  }
}

In my mobile (redmi 5a) I got like this card ui.

and this second mobile's screenshot of card.

CodePudding user response：

If you want comparable results across different devices / screens, you should use less hardcoded width's and height's.

From your first example, I see that you want the cover image to fill up the entire width of the screen. In this case you do not need to use a width in the container.

Change this:

        children: [
            Container(
              height: 145,
              width: 300,
              decoration: BoxDecoration(
                color: const Color(0xFFC691D3).withOpacity(0.25),
                // color:  Colors.red,
                borderRadius: const BorderRadius.all(
                  Radius.circular(10),
                ),
                image:  DecorationImage(
                  image: NetworkImage('${cwcVideoListData["coverImage"]}'),
                  fit: BoxFit.cover,

To this:

        children: [
            Container(
              height: 145,
              decoration: BoxDecoration(
                color: const Color(0xFFC691D3).withOpacity(0.25),
                // color:  Colors.red,
                borderRadius: const BorderRadius.all(
                  Radius.circular(10),
                ),
                image:  DecorationImage(
                  image: NetworkImage('${cwcVideoListData["coverImage"]}'),
                  fit: BoxFit.cover,

If you still want to define width's and height's, you can scale all the UI elements to the device size by using MediaQuery class:

MediaQueryData queryData;
queryData = MediaQuery.of(context);

To get width and height of the device screen:

queryData.size.width
queryData.size.height

CodePudding user response：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              ...List.generate(10, (index) {
                return VideoCard(
                  title: index.toString(),
                  description: 'hello world',
                );
              })
            ],
          ),
        ),
      ),
    );
  }
}

class VideoCard extends StatelessWidget {
  final String title;
  final String description;

  const VideoCard({
    Key? key,
    required this.title,
    required this.description,
  }) : super(key: key);

  @override
  Widget build(context) {
    return Container(
      margin: const EdgeInsets.all(16),
      height: 190,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(6),
        color: Colors.pink[100],
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: const EdgeInsets.only(bottom: 16),
              height: 100,
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(6),
                color: Colors.blue,
              ),
            ),
            Text(title),
            Text(description),
          ],
        ),
      ),
    );
  }
}