Flutter Question posted in
The official Flutter documentation can be found here.

Adjust text based on screen size in flutter

child: Text(
                    'MENTALnPREPARATION',
                    textAlign: TextAlign.center,
                    style: FlutterFlowTheme.of(context).headlineMedium.override(
                          fontFamily:
                              FlutterFlowTheme.of(context).headlineMediumFamily,
                          color: Colors.black,
                          fontSize: () {
                            if (MediaQuery.sizeOf(context).width <
                                kBreakpointSmall) {
                              return 32;
                            } else if (MediaQuery.sizeOf(context).width <
                                kBreakpointMedium) {
                              return 35;
                            } else if (MediaQuery.sizeOf(context).width <
                                kBreakpointLarge) {
                              return 40;
                            } else {
                              return 45;
                            }
                          }()

The text "MENTAL PREPARATION" is a two line text when opened on a smartphone. I want it to change to a single line when opened in Tablet and desktop.

I am not aware of how to go about doing the code changes for the expected functionality

Tags:

2

Answers


  1. 0

    You can check if the current is mobile, desktop or tablet. Here’s an example

    Manual way:

    import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  const Responsive(
      {Key? key,
        required this.mobile,
        required this.tablet,
        required this.desktop})
      : super(key: key);

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

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

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder:(context, constraints){
      if(constraints.maxHeight>=900){
        return desktop;
      }
      else if(constraints.maxHeight>=650){
        return desktop;
      }
      else return mobile;
    });
  }
}

    //Using above Class

    Scaffold(
body: Responsive.isMobile(context) ? Text("HellonWorld") : Text("Hello World")
);

    Another way: Just use this package

    Login or Signup to reply.
  2. 0

    You can try Screen Size Util package to adapt the screen size. You can have a look at the implementation documentation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search