Flutter Alert Dialog Not Centered

Question

I'm creating a Flutter mobile application. I have a Scaffold with a Drawer that is Centered in the App Like This:

Centered Drawer: https://ibb.co/s5BMdNM

When The User Taps on the 2nd ListTile which is "Filter Character / Choose Categories", an AlertDialog popups. The Problem is the Alert Dialog isn't Centered neither vertically nor horizontally in the Landscape Orientation, and It's not centered vertically in the Portrait one.

Landscape AlertDialog: https://ibb.co/GtdJ2jZ

Portrait AlertDialog: https://ibb.co/HH6vQbx

I've tried calculating the percentage of the misplacement and adding it as a padding to the right, it worked when the Device Orientation was LandscapeRight, but was misplaced again when the orientation became LandscapeLeft.

Right Adjusted: https://ibb.co/h9K0YB3

Left Misplaced: https://ibb.co/JykZ67x

I've Searched but currently there's a problem getting the Device's true orientation.

So can anyone help me centering the AlertDialog, or tell me why it isn't centered? Thanks in Advance.

Summarized Drawer's Code:

Scaffold(
key: scaffoldKey,
backgroundColor: Colors.grey[100],
body: _getScaffoldBody(homePageState, context),
drawer: Center(
child: Container(
  alignment: Alignment.center,
  width: MediaQuery.of(context).size.width * 0.9 > 375
      ? 375
      : MediaQuery.of(context).size.width * 0.9,
  height: MediaQuery.of(context).size.height * 0.9 > 58.0 * 6
      ? 58.0 * 6 // 58 * Number of List Tiles
      : MediaQuery.of(context).size.height * 0.9,
  decoration: new BoxDecoration(
    color: Colors.white,
    borderRadius: new BorderRadius.all(Radius.circular(5)),
  ),
  child: ListView(
    shrinkWrap: true,
    padding: EdgeInsets.zero,
    physics: BouncingScrollPhysics(),
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ListTile(
            title: Text('Filter Characters / Choose Categories'),
            trailing: Icon(
              Icons.search,
              color: Colors.blue,
            ),
            onTap: () {
              showCategoriesDialg(homePageState, context);
            },
          ),
        ],
      ),
    ),
  ),
),

Showing AlertDialog's Code:

Future showCategoriesDialg(State<HomePage> homePageState, BuildContext context) async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // user must tap a button!
    builder: (BuildContext context) {
      return AlertDialog(
        scrollable: true,
        content: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height - 200,
          child: ListView.builder(
            itemCount: categories.length,
            itemBuilder: (context, index) {
              return CheckboxListTile(
                title: Text(categories.values.elementAt(index).titleEn),
                value: categories.values.elementAt(index).checked,
                onChanged: (newValue) {
                  homePageState.setState(() {
                    categories.values.elementAt(index).checked = newValue;
                  });
                },
                controlAffinity: ListTileControlAffinity.trailing,
              );
            },
          ),
        ),
      );
    },
  );
}

@pskink I tried replacing the Container with this to test: ```content: ListBody( children: [ Text('This is a demo alert dialog.'), Text('Would you like to approve of this message?'), ], ),``` but it still isn't centered. — Zeyad Ahmad Aql, Jun 12 '20 at 07:47
I think it has to do with 2 popups (the Drawer and the AlerDialog) in front of each other? — Zeyad Ahmad Aql, Jun 12 '20 at 07:50

score 0 · Answer 1 · answered Jun 12 '20 at 13:52

here is how you can get the device orientation

 void main() => runApp(MyApp());

 class MyApp extends StatelessWidget {

   Widget _portraitView(){

     // Return Your Widget View Here Which you want to Load on Portrait Orientation.
     return Container(
    width: 300.00,
     color: Colors.green,
     padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
     child: Text(' Portrait View Detected. ',
             textAlign: TextAlign.center,  
             style: TextStyle(fontSize: 24, color: Colors.white)));
   } 

    Widget _landscapeView(){

     // // Return Your Widget View Here Which you want to Load on Landscape      Orientation.
     return Container(
     width: 300.00,
     color: Colors.pink,
     padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
     child: Text(' Landscape View Detected.',
             textAlign: TextAlign.center,  
             style: TextStyle(fontSize: 24, color: Colors.white)));
   }

   @override
   Widget build(BuildContext context) {
     return MaterialApp(
         home: Scaffold(
         appBar: AppBar(
         title: Text('Detect Device Screen Orientation')),
         body: OrientationBuilder(
           builder: (context, orientation) {
           return Center(

             child: orientation == Orientation.portrait 
             ? _portraitView() 
             : _landscapeView() 

                 );
            }
           )
          )
       );
   }
 }

after you get the correct device orientation you can place your widgets accordingly. and dont use fixed values as a height and width use always MediaQuery.of(context).size.height * percentageYouWant MediaQuery.of(context).size.height * 0.5

Etc.

Hope will help you

Flutter Alert Dialog Not Centered

1 Answers1

Linked