Как сделать приложение отзывчивым для других меньших разрешений? Я использовал Media Query, но у меня не получалось - PullRequest
0 голосов
/ 12 апреля 2020

Когда я создаю макет этого приложения на устройстве с большим дисплеем, оно прекрасно работает (1920 x 1080). Но когда я запускаю приложение на устройстве с меньшим экраном, нижние кнопки не отображаются .. Что я могу сделать для этого? mediaquery поддерживает виджет столбца ...? Должен ли я использовать другой метод вместо Mediaquery?

Это главный дротик .... // Запуск приложения не входит //

return ResponsiveWidget(
          builder: (context,constraints){
            return Stack(
            children: <Widget>[
              new Container(
                decoration:new BoxDecoration(
                  image: new DecorationImage(
                    image: new AssetImage(_Image()()),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
       Scaffold(
          backgroundColor:Colors.transparent,
            appBar:AppBar(
              backgroundColor:Colors.transparent,
              elevation:0.0,
            ),
            drawer:Drawer(
              child: ListView(
                children: <Widget>[
                  DrawerHeader(
                  child: Text('Drawer Header',
                  style:TextStyle(
                    fontSize: 30.0,
                    ),
                  ),
                  decoration: BoxDecoration(
                  color: Colors.green[300],
                  ),
                  )],
              ),
            ),
            body:Column(
                children: <Widget>[
                  Row(
                    crossAxisAlignment:CrossAxisAlignment.center,
                    mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      SizedBox(width:10,height:10,),
                      Text(
                        "NAME",
                        style:TextStyle(
                          fontSize:40.0,
                          fontWeight:FontWeight.bold,
                          color:Colors.white,
                        ),
                      ),
                      SizedBox(width:10),
                    ],
                    ),
                  SizedBox(height:20),

                  GestureDetector(
                    onTap:(){
                      print("Clicked");

                    },
                    child: CircleAvatar(
                      radius:80,
                      backgroundImage:_decideImageView(),
                    ),
                  ),

                SizedBox(height: 30,),
                Text("Text",
                      style:TextStyle(
                        fontStyle:FontStyle.italic,
                        fontSize:15,
                        color:Colors.white,
                        ),  
                      ),

                SizedBox(height: 10,),
                Text("Text",
                      style:TextStyle(
                        fontFamily:'mrsmonster',
                        fontSize:20,
                        color:Colors.white,
                        ), 
                       ),

                 SizedBox(height:50,),

                FlatButton(child:Text(
                  "TExt",
                  style:TextStyle(
                    fontWeight:FontWeight.bold,
                    fontSize:30,
                    color:Colors.white,
                        ),
                      ),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                          //side: BorderSide(color: Colors.red)
                            ),
                  color:Hexcolor('#149da5'),
                  padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
                  onPressed: (){
                      setState(() {});
                  },
                ),

                SizedBox(height:10,),

                FlatButton(child:Text(
                  "Text",
                  style:TextStyle(
                    fontWeight:FontWeight.bold,
                    fontSize:30,
                    color:Colors.white,
                  ),
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                          //side: BorderSide(color: Colors.red)
                            ),
                  color:Hexcolor('#f4856b'),
                  padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
                  onPressed: (){
                      setState(() {});
                    },
                    ),
                  ],
                  ),
                )
              ]
            );
            );

Это отзывчивый виджет

import 'package:app/SizeInformation.dart';
import 'package:flutter/material.dart';



    class ResponsiveWidget extends StatelessWidget {


        final AppBar appBar;
        final Drawer drawer;
        final Widget Function(BuildContext context,SizeInformation constraints) builder;
      ResponsiveWidget({@required this.builder,this.appBar,this.drawer});


      @override
      Widget build(BuildContext context) {

        var width = MediaQuery.of(context).size.width;
        var height = MediaQuery.of(context).size.height;
        var orientation = MediaQuery.of(context).orientation;

        SizeInformation information = SizeInformation(width,height,orientation);



         return Stack(children: <Widget>[
                Scaffold(
              drawer:drawer,
              appBar:appBar,
              body: builder(context,information),

            ),
         ]
         );
      }
    }

1 Ответ

1 голос
/ 12 апреля 2020

Вы должны использовать Стек внутри корпуса Лески, а не оборачивать Леску Стеком. Вы должны использовать только один эшафот на одном экране. То, что вы сделали, просто неправильно ... Не бродите, это не работает. Все, что находится в корпусе лесов, будет автоматически подстроено под ваше разрешение экрана ... поэтому нет необходимости делать это вручную. Вот вопрос, как установить фоновое изображение без использования виджета Stack Flutter SDK Установить фоновое изображение , поэтому нет необходимости даже использовать Stack

...