Flutter - How to setup a custom height and width of Scaffold

Question

I'm aware that MediaQuery solutions exist to problems, however, I want to limit the size of my Scaffold so that it can be used for web-based apps as well. Similar to what Instagram has, can anyone help me with it?

Answer 1

Had the same problem and this happens to solve it: Place your bottomsheet in a scaffold and safearea

SafeArea(
bottom: false, // this to remove default bottom padding
//this should be your desired padding height from top to all background page still show
minimum: EdgeInsets.only(top: MediaQuery.of(context).size.height *0.09),
child: Scaffold(
backgroundColor:
Colors.transparent,
extendBody: true,
resizeToAvoidBottomInset: true,
body: YourBottomSheetContent()))

Answer 2

I used sizedboxes to create layers for a single page look. The gridview does not shrink to the size of the window. Instead it activates scrolling. My solution works for chrome web.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        buttonTheme: const ButtonThemeData(
          textTheme:ButtonTextTheme.primary,
          buttonColor:Colors.yellow,
        )
      ),
      home:  Test_SinglePage(),
    );
  }
}
class DataRecord{
  String name;
  String number;
  DataRecord(this.name,this.number);
}
class Test_SinglePage extends StatefulWidget {
  Test_SinglePage({Key? key}) : super(key: key);

  @override
  State<Test_SinglePage> createState() => _Test_SinglePageState();
}


class _Test_SinglePageState extends State<Test_SinglePage> {
   List<DataRecord> lstData=[
    DataRecord("A","1"),    DataRecord("B","2"),    DataRecord("C","3"),    DataRecord("D","4"),
    DataRecord("E","5"),    DataRecord("F","6"),    DataRecord("G","7"),    DataRecord("H","8"),
    DataRecord("I","9"),    DataRecord("J","10"),    DataRecord("K","11"),    DataRecord("L","12"),
    DataRecord("M","13"),    DataRecord("N","14"),    DataRecord("O","15"),    DataRecord("P","16"),
    DataRecord("Q","17"),    DataRecord("R","18"),    DataRecord("S","19"),    DataRecord("T","20"),
    DataRecord("V","21"),    DataRecord("X","22"),    DataRecord("Y","23"),    DataRecord("Z","24"),
  ];

  Widget _dialogBuilder(BuildContext context, String name)
  {
      return SimpleDialog(
        contentPadding:EdgeInsets.zero,
        children:[
        Container(width:80,height:80,child:
        Column(children:[
        Text(name),
        SizedBox(height:20),
        Expanded(child:Row(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [ElevatedButton(onPressed:(){ Navigator.of(context).pop();}, child: 
            Text("Close"))
          ],))
        ])
        )]);
  }

  Widget _itemBuilder(BuildContext context,int index)
   {
     return
     GestureDetector(
       onTap:()=>showDialog(context:context,builder:(context)=>_dialogBuilder(context,lstData[index].name)),
      child:Container(color:Colors.grey,child:GridTile(child: Center(child:
     Column(children:[
     Text(lstData[index].name,style:Theme.of(context).textTheme.headline2),
     Text(lstData[index].number,style:Theme.of(context).textTheme.headline4)
     ])
     ))));
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title:Text("Single Page")),body: 
    Container(
      margin: const EdgeInsets.only(top:20.0, left: 20.0, right: 20.0, bottom:10.0),
      child:
      Flex(
        direction: Axis.vertical,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [

          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child:Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children:[
              
            FittedBox(
                fit:BoxFit.fitHeight,
              child:SizedBox(
                width:200,
                height:200,
                child: Image.asset("assets/images/apple.jpg"),
              )),
              Column(
                mainAxisAlignment:MainAxisAlignment.start,
                children:[
              Row(

              children: [
                SizedBox(height:100,width:200,child:Container(color:Colors.red,child:Text("reached"))),
                SizedBox(height:100,width:200,child:Container(color:Colors.blue,child:Text("reached2"))),
                SizedBox(height:100,width:200,child:Container(color:Colors.green,child:Text("reached3")))
              ],),
              Row(children: [
                 SizedBox(width:600, child:ElevatedButton(
                   
                   onPressed:(){

                  },child:Text("Press Me")))],)

              ])
          ])),
      
      Expanded(child:SizedBox(
        height:400,
        width:MediaQuery.of(context).size.width,child:
      GridView.builder(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 300,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
      itemCount: lstData.length,
      itemBuilder: _itemBuilder
      )))],)
    ,));
  }
}

Answer 3

Have you tried wrapping your Scaffold in SafeArea with a minimum property of EdgeInsets.all(32.0)?

For me, this recreates your mockup on any screen

Example code:

//...
return SafeArea(

  minimum: const EdgeInsets.all(32.0),

  child: Scaffold(
    //...
  ),
);
//...