Диалоговое окно предупреждения о флаттере не центрировано

Я создаю мобильное приложение Flutter. У меня есть эшафот с ящиком, который находится в центре приложения, например:

Ящик по центру: https://ibb.co/s5BMdNM

Когда пользователь нажимает на 2-й ListTile, который является символом фильтра/выбором категорий, появляется всплывающее окно AlertDialog. Проблема заключается в том, что диалоговое окно предупреждения не центрировано ни по вертикали, ни по горизонтали в альбомной ориентации, а также не центрировано по вертикали в портретной ориентации.

Ландшафтное диалоговое окно оповещения: https://ibb.co/GtdJ2jZ

Диалоговое окно портретного оповещения: https://ibb.co/HH6vQbx

Я попытался рассчитать процент смещения и добавить его в качестве отступа справа, это сработало, когда ориентация устройства была альбомной справа, но снова сместилась, когда ориентация стала альбомной слева.

Скорректировано справа: https://ibb.co/h9K0YB3

Оставлено не на месте: https://ibb.co/JykZ67x

Я искал, но в настоящее время есть проблема с определением истинной ориентации устройства.

Так может ли кто-нибудь помочь мне центрировать AlertDialog или сказать мне, почему он не центрирован? Заранее спасибо.

Обобщенный код ящика:

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

Отображение кода AlertDialog:

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

person Zeyad Ahmad Aql    schedule 12.06.2020    source источник
comment
@pskink Я попытался заменить Контейнер на это, чтобы проверить: content: ListBody( children: <Widget>[ Text('This is a demo alert dialog.'), Text('Would you like to approve of this message?'), ], ),, но он все еще не отцентрирован.   -  person Zeyad Ahmad Aql    schedule 12.06.2020
comment
Я думаю, это связано с двумя всплывающими окнами (Drawer и AlerDialog) друг перед другом?   -  person Zeyad Ahmad Aql    schedule 12.06.2020
comment
@pskink К сожалению, нет =(   -  person Zeyad Ahmad Aql    schedule 12.06.2020


Ответы (1)


вот как вы можете получить ориентацию устройства

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

                 );
            }
           )
          )
       );
   }
 }

после того, как вы получите правильную ориентацию устройства, вы можете разместить свои виджеты соответствующим образом. и не используйте фиксированные значения в качестве высоты и ширины, всегда используйте MediaQuery.of(context).size.height * процентYouWant MediaQuery.of(context).size.height * 0,5

И т.п.

Надежда тебе поможет

person ekoRem    schedule 12.06.2020