Wie machen die flutter-app reaktionsschnell Weg nach verschiedenen Bildschirm-Größe?
Ich bin Schwierigkeiten zu machen, zu reagieren, die nach verschiedenen Bildschirm-Größen. Wie machen es responsive?
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(color: Colors.white),
child: new Stack(
children: [
new Padding(
padding: const EdgeInsets.only(bottom: 350.0),
child: new GradientAppBar(" "),
),
new Positioned(
bottom: 150.0,
height: 260.0,
left: 10.0,
right: 10.0,
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: const Text(
'LOGIN',
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 16.50,
fontFamily: "Helvetica",
fontWeight: FontWeight.bold,
color: Colors.black87,
letterSpacing: 1.00,
),
),
),
new ListTile(
leading: const Icon(Icons.person),
title: new TextField(
controller: _user1,
decoration: new InputDecoration(
labelText: ' Enter a username'),
),
),
new ListTile(
leading: const Icon(Icons.person_pin),
title: new TextField(
controller: _pass1,
decoration: new InputDecoration(
labelText: ' Enter a password'),
obscureText: true,
),
),
],
),
),
),
),
new Positioned(
bottom: 70.0,
left: 15.0,
right: 05.0,
child: new ButtonTheme.bar(
//make buttons use the appropriate styles for cards
child: new ButtonBar(
children: <Widget>[
new FlatButton(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'REGISTER HERE',
style: new TextStyle(
color: Colors.black87,
fontFamily: "Helvetica",
fontSize: 15.00,
fontWeight: FontWeight.bold),
),
onPressed: () {
Navigator.of(context).pushNamed('/facebook');
},
),
new FlatButton(
padding: new EdgeInsets.only(right: 22.0),
child: new Text(
'FORGOT PASSWORD?',
style: new TextStyle(
color: Colors.black87,
fontFamily: "Helvetica",
fontSize: 15.00,
fontWeight: FontWeight.bold),
),
onPressed: () {
Navigator.of(context).pushNamed('/Forgot');
},
),
],
),
),
),
new Positioned(
bottom: 73.0,
height: 180.0,
left: 20.0,
right: 52.0,
child: new Padding(
padding: new EdgeInsets.all(0.00),
child: new ButtonTheme(
minWidth: 10.0,
height: 20.0,
padding: new EdgeInsets.only(right: 37.0),
child: new ButtonBar(children: <Widget>[
new CupertinoButton(
borderRadius:
const BorderRadius.all(const Radius.circular(36.0)),
padding: new EdgeInsets.only(left: 70.0),
color: const Color(0xFF426DB7),
child: new Text(
" LOGIN ",
style: new TextStyle(
color: Colors.white,
fontSize: 12.50,
fontFamily: "Handwriting",
fontWeight: FontWeight.w500,
letterSpacing: 0.00),
),
onPressed: () {})
]),
),
),
),
],
),
);
}
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit
MediaQuery
Klasse:To get Device-Pixel-Ratio:
Um Breite und Höhe des gerätebildschirms:
Get text skalieren Faktor:
Mit
AspectRatio
Klasse:Vom doc:
Auch Sie können:
queryData
.Was ich tun ist, nehmen Sie Bildschirm-Breite und-Höhe und Berechnung ein raster von 100*100 draus zu position und Skalierung Dinge und speichern Sie Sie als statische Variablen, die wiederverwendet werden können. Funktioniert ganz gut, in den meisten Fällen. Wie diese:
Dann habe ich Maßstab alles nach diesen Werten, wie diese:
oder
Manchmal den sicheren Bereich (notch, etc) tötet ein layout, so betrachten Sie diese, zu:
Dieser funktioniert großartig auf einige aktuelle Projekte.
Überprüfen
MediaQuery
KlasseSo können Sie Folgendes tun:
schauen Sie sich diese Seite aus flattern wiki :
Erstellen Von Responsive Apps
erstellen-Datei-name (app_config.dart) in der Ordner-name(responsive_screen) in den lib-Ordner:
dann:
Breite:
MediaQuery.of(context).size.width
,Höhe:
MediaQuery.of(context).size.height
,