mardi 5 mai 2020

How to avoid resizing on the split screen mode in Flutter?

In attempts to develop a responsive app I faced the issue when the app resizes its components in split screen mode. As I checked, it was caused with the context and window are also changing their values while switching to split screen mode.

How it looks (My app is below), header is contorted by resizing when I used MediaQuery.of(context).height : Its header is contorted

In full screen mode it is okay: How it should be

Is there any way to fix it.

My code:

main.dart:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'screens/home.dart';
import 'package:flutter/services.dart';
import './sizing/Sizing.dart';

class Orient extends StatelessWidget{
    @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: Color.fromRGBO(9, 168, 48, 1), //or set color with: Color(0xFF0000FF)
    ));
    // TODO: implement build
    return MaterialApp(
        title: 'Orient tm',
        home: SafeArea(child: Home(dimensions: Sizing(),)),
    );
  } 
}

void main()=>runApp(Orient());

P.S I tried to get value of window size in static mode, not using a context. It works partially when the app is the first primary in the split screen mode but not when it is displayed as the second app ( see the first image ).

home.dart:

import 'dart:ui';

import 'package:flutter/material.dart';
import '../sizing/Sizing.dart';

class Home extends StatelessWidget{
  final Sizing dimensions;
  Home({this.dimensions});

  List<Widget> _nav() =>  <Widget>[
      Expanded(
        flex: 2,
        child: Icon(Icons.menu),
      ),
       Expanded(
         flex: 8,
         child: Padding(
            padding: EdgeInsets.symmetric(vertical: dimensions.height*0.01), 
            // child: Container(child: Image.asset('assets/images/orient1.png'),),
           )
      ),
      Expanded(
        flex: 2,
        child: Icon(Icons.search),
      ),
  ]; 


  Container _header(context) => 
      Container(
          child: Center( 
            child: Row(
              children: _nav(),
            )
          ),
          decoration: BoxDecoration(
            color: Color.fromRGBO(9, 168, 48, 1),
            borderRadius: BorderRadius.vertical(
                bottom: Radius.elliptical(
                    dimensions.width, dimensions.width*(7/75))),
          ),
  );

    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return (
      Scaffold(
        extendBodyBehindAppBar: true,
         appBar: PreferredSize(
           preferredSize: Size.fromHeight(dimensions.height*0.07),
           child: _header(context),
         ),
         body: Container(
           decoration: BoxDecoration(
             color: Colors.white
           ),
         ),
      )
    );
  }
}

Sizing.dart:

import 'dart:ui';

import 'package:flutter/material.dart';

var size = MediaQueryData.fromWindow(window).size;

class Sizing{

    final double height;
    final double width;

    Sizing(): height = size.height, width = size.width;

}



Aucun commentaire:

Enregistrer un commentaire