This code is overflowing in the small devices in a flutter.

I want to make this screen responsive.

I am posting because it's not been solved past 8 days

Below is my main.dart

import 'package:flutter/material.dart';
import 'package:mop_n_maid/utils/route_name.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

const themeColor = Color(0xFF353E58);

class OnboardingPage extends StatefulWidget {
  const OnboardingPage({Key? key}) : super(key: key);
  @override
  _OnboardingPageState createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  final controller = PageController();
  bool isLastPage = true;
  void dispose() {
    controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(bottom: 80),
        child: PageView(
          controller: controller,
          onPageChanged: (index) {
            setState(() => isLastPage = index == 3);
          },
          children: [
            buildPage(
              color: Colors.white,
              urlImage: 'assets/images/extras/Helping.jpg',
              title: 'What do you look for when hiring a maid?',
            ),
            buildPage(
              color: Colors.white,
              urlImage: 'assets/images/extras/verified.jpg',
              title: 'Are your domestic helper verified?',
            ),
            buildPage(
              color: Colors.white,
              urlImage: 'assets/images/extras/changeplan.jpg',
              title: 'Changed plans because your maid coming late?',
            ),
            buildPage(
              color: Colors.white,
              urlImage: 'assets/images/extras/Solution.jpg',
              title: 'All Solutions at one stop!',
            ),
          ],
        ),
      ),
      bottomSheet: isLastPage
          ? TextButton(
              style: TextButton.styleFrom(
                primary: Colors.white,
                backgroundColor: themeColor,
                minimumSize: Size.fromHeight(80),
              ),
              onPressed: () {
                Navigator.pushReplacementNamed(context, MyRoutes.loginRoute);
              },
              child: const Text(
                'Get Started',
                style: TextStyle(fontSize: 24),
              ),
            )
          : Container(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              height: 80,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  TextButton(
                    onPressed: () {
                      controller.jumpToPage(3);
                    },
                    child: Text(
                      'SKIP',
                      style: TextStyle(color: themeColor),
                    ),
                  ),
                  Center(
                    child: SmoothPageIndicator(
                      controller: controller,
                      count: 4,
                      effect: WormEffect(
                        spacing: 16,
                        dotColor: Colors.black26,
                        activeDotColor: themeColor,
                      ),
                      onDotClicked: (index) => controller.animateToPage(
                        index,
                        duration: Duration(milliseconds: 500),
                        curve: Curves.easeIn,
                      ),
                    ),
                  ),
                  TextButton(
                    onPressed: () {
                      controller.nextPage(
                          duration: Duration(milliseconds: 500),
                          curve: Curves.easeInOut);
                    },
                    child: Text(
                      'NEXT',
                      style: TextStyle(
                        color: themeColor,
                      ),
                    ),
                  ),
                ],
              ),
            ),
    );
  }
}

Widget buildPage({
  required Color color,
  required String urlImage,
  required String title,
}) {
  return Container(
    color: color,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: 400,
          child: Image.asset(
            urlImage,
            fit: BoxFit.cover,
            width: double.infinity,
          ),
        ),
        const SizedBox(
          height: 64,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: Text(
            title,
            style: TextStyle(
              color: themeColor,
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    ),
  );
}

This image is showing my problem in detail

CodePudding user response：

Try this

Widget buildPage({
  required Color color,
  required String urlImage,
  required String title,
}) {
  return Container(
    color: color,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: MediaQuery.of(context).size.height * 0.4,
          child: Image.asset(
            urlImage,
            fit: BoxFit.cover,
            width: double.infinity,
          ),
        ),
        const SizedBox(
          height: 64,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: Expanded(
          Text(
            title,
            style: TextStyle(
              color: themeColor,
              fontSize: 25,
              fontWeight: FontWeight.bold,
            )),
          ),
        ),
      ],
    ),
  );
}`enter code here`