如何根据不同的屏幕尺寸使 Flutter 应用响应？

Question

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Appcolors.white,
     appBar: AppBar(
      backgroundColor: Appcolors.white,
      elevation: 0,
     ),
      body: SingleChildScrollView(
        child: SafeArea(
          child: Column(
            children:  [
              const Padding(
                padding: EdgeInsets.fromLTRB(0, 30,0,0),
                child: Center(child: Text('Welcome Back!',style: TextStyle(fontSize: 30,fontWeight: FontWeight.w700),)),
              ),
              const SizedBox(height: 8),
              const Text('Please enter your account here',style: TextStyle(fontSize: 15,fontWeight: FontWeight.w400),),
      
              const SizedBox(height: 59,),
              //Email textfield
              Padding(
                padding: const EdgeInsets.only(left: 31, right: 31),
                child: TextField(
                  cursorColor: Appcolors.black,
                  decoration: InputDecoration(
                    fillColor: Appcolors.white,
                    filled: true,
                    prefixIcon: const Icon(Icons.email_outlined,color: Appcolors.black),
                    label: Text('Email'),
                    
                    enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Appcolors.textfieldborder),
                      borderRadius: BorderRadius.circular(32)),
                    focusedBorder:  OutlineInputBorder(
                       borderSide: const BorderSide(color: Appcolors.buttonColor),
                      borderRadius: BorderRadius.circular(32)),
                  ),
                ),
              ),
      
      
               const SizedBox(height: 30,),
               //Password textfield
              Padding(
                padding: const EdgeInsets.only(left: 31, right: 31),
                child: TextField(
                   cursorColor: Appcolors.black,
                   decoration: InputDecoration(
                    prefixIcon: const Icon(Icons.lock,color: Appcolors.black),
                    label: const Text('Password'),
                     labelStyle: TextStyle(color: Appcolors.buttonColor),
                    suffixIcon: IconButton(onPressed: (){},
                     icon: const Icon(Icons.remove_red_eye_outlined,color: Appcolors.black)
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Appcolors.textfieldborder),
                      borderRadius: BorderRadius.circular(32)),
                    focusedBorder:  OutlineInputBorder(
                       borderSide: const BorderSide(color: Appcolors.buttonColor),
                      borderRadius: BorderRadius.circular(32)),
                  ),
                ),
              ),
              
              Padding(
                padding: const EdgeInsets.fromLTRB(150, 10, 0, 0),
                child: TextButton(onPressed: (){}, 
                child: const Text('Forgot password?',style: TextStyle(color: Appcolors.forgotpassword, fontSize: 15,fontWeight: FontWeight.w500),)
                ),
              ),

             const SizedBox(height: 30,),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(300, 56),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)),
                  elevation: 0,primary: Appcolors.buttonColor),
                onPressed: (){}, 
              child: const Text('Login',
              style: TextStyle(shadows: [
                Shadow(offset: Offset(5.0, 5.0),
                blurRadius: 12.0)
                ],
                fontSize: 16,
                fontWeight: FontWeight.w700),
                )
                ),
    

               Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('Don\'t have any accont?',style: TextStyle(fontSize: 15,fontWeight: FontWeight.w500)),
                  TextButton(onPressed: (){}, 
                  child: const Text('Sign Up',style: TextStyle(fontSize: 15,fontWeight: FontWeight.w700, color: Appcolors.buttonColor),))
                ],
               ),

              const SizedBox(height: 15,),

              
              Row(
                children: const [
                  Expanded(
                    child: Divider(thickness: 1.5,indent: 30,endIndent: 10,)),
                  Text('Sign in with',style: TextStyle(fontSize: 15),),
                  Expanded(
                    child: Divider(thickness: 1.5,indent: 10,endIndent: 30))

                ],
              ),

              const SizedBox(height: 40,),

               Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  InkWell(
                    onTap: () {
                      
                    },
                    child: const Image(
                      image:
                       AssetImage('assets/images/Facebook_Logo.png'),height: 30,),
                  ),
                  const SizedBox(width: 50,),
                  InkWell(
                    onTap: () {
                      
                    },
                    child: const Image(
                      image:
                       AssetImage('assets/images/Google__Logo.png'),height: 30,),
                  )
                  
                ],
               )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

You can create a local variable in the context of the build that gets the size of the screen.

Size size = MediaQuery.of(context).size;

After that you can always use the size relative to the context.

For example like here:

SizedBox(height: size.height * 0.5)

Answer 2

To add up a bit on the other answer, you can also create an abstract class that contains your dimensions

import 'package:flutter/material.dart';

abstract class ResponsiveUtils extends StatelessWidget {
  static const double mobileWidthLimit = 650;
  static const double tabletWidthLimit = 1100;
  final Widget screenWeb;
  final Widget screenTablet;
  final Widget screenMobile;

  const ResponsiveUtils(
      {Key? key,
      required this.screenWeb,
      required this.screenTablet,
      required this.screenMobile})
      : super(key: key);

  static bool isScreenWeb(final BuildContext context) =>
      MediaQuery.of(context).size.width >= tabletWidthLimit;

  static bool isScreenTablet(final BuildContext context) =>
      MediaQuery.of(context).size.width >= mobileWidthLimit &&
      MediaQuery.of(context).size.width <= tabletWidthLimit;

  static bool isScreenMobile(final BuildContext context) =>
      MediaQuery.of(context).size.width <= mobileWidthLimit;
}

If you then want to change your layout whenever a certain threshold is passed, you can check this class for the current dimensions

ResponsiveUtils.isScreenWeb(context)
                  ? Container()
                  : Container()

Answer 3

Try the following code:

import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
  const Responsive({required this.mobile, required this.tablet, required this.desktop, super.key});

  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  static bool isMobile(BuildContext context) => MediaQuery.of(context).size.width < 600.0;

  static bool isTablet(BuildContext context) => MediaQuery.of(context).size.width < 1100.0 && MediaQuery.of(context).size.width >= 600.0;

  static bool isDesktop(BuildContext context) => MediaQuery.of(context).size.width >= 1100.0;

  @override
  Widget build(BuildContext context) => LayoutBuilder(
        builder: (context, constraints) => isDesktop(context)
            ? desktop
            : isTablet(context)
                ? tablet
                : mobile,
      );
}

Answer 4

On advance handling on small/tab/desktop and foldable screens use code given below: for dual screen use package https://pub.dev/packages/dual_screen , just adjust your widgets accordingly.

import 'package:adaptive_breakpoints/adaptive_breakpoints.dart';
import 'package:dual_screen/dual_screen.dart';
import 'package:flutter/material.dart';

/// The maximum width taken up by each item on the home screen.
const maxHomeItemWidth = 1400.0;

/// Returns a boolean value whether the window is considered medium or large size.
///
/// When running on a desktop device that is also foldable, the display is not
/// considered desktop. Widgets using this method might consider the display is
/// large enough for certain layouts, which is not the case on foldable devices,
/// where only part of the display is available to said widgets.
///
/// Used to build adaptive and responsive layouts.
bool isDisplayDesktop(BuildContext context) =>
    !isDisplayFoldable(context) &&
    getWindowType(context) >= AdaptiveWindowType.medium;

/// Returns boolean value whether the window is considered medium size.
///
/// Used to build adaptive and responsive layouts.
bool isDisplaySmallDesktop(BuildContext context) {
  return getWindowType(context) == AdaptiveWindowType.medium;
}

bool isDisplayXSmallDesktop(BuildContext context) {
  return getWindowType(context) <= AdaptiveWindowType.xsmall;
}

/// Returns a boolean value whether the display has a hinge that splits the
/// screen into two, left and right sub-screens. Horizontal splits (top and
/// bottom sub-screens) are ignored for this application.
bool isDisplayFoldable(BuildContext context) {
  final hinge = MediaQuery.of(context).hinge;
  if (hinge == null) {
    return false;
  } else {
    // Vertical
    return hinge.bounds.size.aspectRatio < 1;
  }
}