I want to make this image/Text resizeable when run on a smaller or bigger phone rights now it’s just look like not fitted to the screen. What widgets should I wrap it with?

This is my IphoneS:

And this is my current simulator (Iphone13):

And some of the Code for the CarouselSlider images:

List image1 = [
    'assets/images/f1.png',
    'assets/images/f2.png',
    'assets/images/f3.png',
    'assets/images/f4.png',
  ];

                          CarouselSlider(
                            options: CarouselOptions(
                              height: 200.0,
                              autoPlay: true,
                              reverse: false,
                              enlargeCenterPage: false,
                              enableInfiniteScroll: false,
                              scrollDirection: Axis.horizontal,
                              autoPlayInterval: const Duration(seconds: 6),
                              autoPlayAnimationDuration:
                                  const Duration(seconds: 3),
                            ),
                            items: image1
                                .map(
                                  (item) => Padding(
                                    padding: const EdgeInsets.only(top: 9.0),
                                    child: Card(
                                      margin: const EdgeInsets.only(
                                        top: 10.0,
                                        bottom: 20.0,
                                      ),
                                      elevation: 0.0,
                                      shape: RoundedRectangleBorder(
                                        borderRadius:
                                            BorderRadius.circular(10.0),
                                      ),
                                      child: GestureDetector(
                                        child: ClipRRect(
                                          borderRadius: const BorderRadius.all(
                                            Radius.circular(10.0),
                                          ),
                                          child: Image.asset(
                                            item,
                                            fit: BoxFit.fill,
                                          ),
                                        ),
                                        onTap: () {
                                          image1.indexOf(item);
                                          indexMethod(
                                              image1.indexOf(item).toString());
                                        },
                                      ),
                                    ),
                                  ),
                                )
                                .toList(),
                          ),

And some of the Code for the Text: //profile button only

                            Column(
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(top: 20.0),
                                  child: CircleAvatar(
                                    radius: 28,
                                    backgroundColor:
                                        const Color(0xff5CE1E6),
                                    child: IconButton(
                                      icon: const Icon(
                                        Icons.person,
                                        size: 35,
                                        color: Colors.black,
                                      ),
                                      onPressed: () => Navigator.push(
                                          context,
                                          PageTransition(
                                              type: PageTransitionType
                                                  .rightToLeft,
                                              child:
                                                  const ProfileScreen())),
                                    ),
                                  ),
                                ),
                                const Padding(
                                  padding: EdgeInsets.only(top: 10.0),
                                  child: Text('Profile'),
                                ),
                              ],
                            ),

CodePudding user response：

try this https://pub.dev/packages/flutter_screenutil

A flutter plugin for adapting screen and font size. Let your UI display a reasonable layout on different screen sizes!

tutorial: https://youtu.be/LWteDQes4Kk

CodePudding user response：

An easy and dependency-free way is to use MediaQuery.of(context).size

Examples:

Use MediaQuery.of(context).size.width to get a full width of the device.

Use MediaQuery.of(context).size.height to get the total height of the device.

Use MediaQuery.of(context).size.height * 0.3 to get 30% of the device height.