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 : 
In full screen mode it is okay: 
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