0

When I design this app layout in device with larger display It works perfectly fine(1920 x 1080) But when I run app in device with smaller screen bottom buttons are not showing..What can I do for this? Is mediaquery support for column widget...? Should I have to use another method instead of Mediaquery?

This is main dart....//Run app not included//

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(() {});
                    },
                    ),
                  ],
                  ),
                )
              ]
            );
            );

This is Responsive Widget

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),

            ),
         ]
         );
      }
    }
Axen_Rangs
  • 261
  • 7
  • 19

1 Answers1

1

You should use Stack inside a Scaffold body and not wrapping Scaffold with Stack. You have to use only one Scaffold in one screen. What you've done is just wrong... No wander it is not working. Whatever is in scaffold body will be automatically adjusted to your screen resolution... therefore no need to do it manually. Here is a question how to set background image without using Stack widget Flutter SDK Set Background image so there is no need to even use Stack

LonelyWolf
  • 4,164
  • 16
  • 36