Как исправить черный экран при флаттере при навигации?

avatar
Shahbaz
24 апреля 2020 в 08:55
5439
14
24

Я создаю многостраничное приложение на флаттере. Когда я использую навигацию в нем, я получаю черный экран.


    import 'package:flutter/material.dart';
    
    
    void main() => runApp(MyHomePage());
    
    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Page0(),
        );
      }
    }
    
    class Page0 extends StatefulWidget {
      @override
      _Page0State createState() => _Page0State();
    }
    
    class _Page0State extends State {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color(0xFF493597),
          body: ListView(
            children: [
              Padding(
                padding: EdgeInsets.only(top: 15.0, left: 10.0),
              ),
              SizedBox(
                height: 25.0,
              ),
              Padding(
                padding: EdgeInsets.only(left: 40.0),
                child: Row(
                  children: [
                    Text(
                      'Expense',
                      style: TextStyle(
                          fontFamily: 'Montserrat',
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 25.0),
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      'What',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        color: Colors.white,
                        fontSize: 25.0,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 60.0),
              Container(
                margin: EdgeInsets.only(
                  left: 10.0,
                  right: 10.0,
                ),
                height: MediaQuery.of(context).size.height - 150,
                decoration: BoxDecoration(
                  color: Color(0xFFFCFCFC),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(75.0),
                    topRight: Radius.circular(75.0),
                  ),
                ),
                child: ListView(
                  primary: false,
                  padding: EdgeInsets.only(
                    left: 15.0,
                    right: 20.0,
                    top: 25.0,
                  ),
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 30.0,
                      ),
                      child: Column(
                        children: [
                          //greeting text
                          Row(
                            children: [
                              Expanded(
                                child: Center(
                                  child: Text(
                                    'Hello! :)',
                                    style: TextStyle(
                                      fontFamily: 'Permanent-Marker',
                                      color: Colors.black,
                                      fontSize: 30.0,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
    
                          SizedBox(
                            height: 30.0,
                          ),
    
                          //add button
                          Row(children: [
                            Expanded(
                              flex: 1,
                              child: Container(
                                height: 100.0,
                                width: 100.0,
                                child: FittedBox(
                                  child: FloatingActionButton(
                                    elevation: 10.0,
                                    backgroundColor: Colors.white,
                                    child: Icon(
                                      Icons.add,
                                      color: Colors.black,
                                    ),
                                    onPressed: () {
                                       Navigator.push(context,MaterialPageRoute(builder: (context) => NewTrip()),);
                                    },
                                  ),``
                                ),
                              ),
                            ),
    
                            //add text
                            Expanded(
                              flex: 1,
                              child: Text(
                                'New trip',
                                style: TextStyle(
                                  fontFamily: 'Nanum',
                                  fontSize: 30.0,
                                ),
                              ),
                            ),
                          ]),
    
                          SizedBox(
                            height: 30.0,
                          ),
    
                          //previous trip button
                          Row(
                            children: [
                              Expanded(
                                flex: 1,
                                child: Container(
                                  height: 100.0,
                                  width: 100.0,
                                  child: FittedBox(
                                    child: FloatingActionButton(
                                      elevation: 10.0,
                                      backgroundColor: Colors.white,
                                      onPressed: () {},
                                      child: Icon(
                                        Icons.assessment,
                                        color: Colors.black,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
    
                              //previous trip text
                              Expanded(
                                flex: 1,
                                child: Text(
                                  'Previous trips',
                                  style: TextStyle(
                                    fontFamily: 'Nanum',
                                    fontSize: 30.0,
                                  ),
                                ),
                              )
                            ],
                          ),
    
                          SizedBox(
                            height: 50.0,
                          ),  
                          
    
                         
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }
    }

И виджет NewTrip выглядит следующим образом


    class NewTrip extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(      
                  body: Text('NEW TRIP'),
                ),
        );
      }
    }

Домашняя страница загружается нормально, но как только я нажимаю кнопку новой поездки, появляется черный экран. Возможно, есть проблема с MaterialApp или Scaffold, но я пока не могу ее исправить. Может ли кто-нибудь сказать мне, в чем проблема и как ее исправить?

Обновлен полный код в соответствии с просьбой в комментариях.

Источник
Sandeep Sharma
24 апреля 2020 в 08:58
0

на физическом устройстве? или симулятор?

Shahbaz
24 апреля 2020 в 08:59
0

На физическом устройстве

Saman Salehi
24 апреля 2020 в 09:25
0

Коды, которые приведены в вопросе, слишком минимальны... Это может быть из метода NewTrip build, Но это не ясно!

Sunit Gautam
24 апреля 2020 в 10:09
1

Пожалуйста, предоставьте больше кода из соответствующих виджетов. Был бы рад помочь :)

Shahbaz
24 апреля 2020 в 11:05
0

Я обновил полный код.

Saman Salehi
24 апреля 2020 в 15:56
0

Удалите MaterialApp из NewTrip и повторите проверку.

Shahbaz
25 апреля 2020 в 09:45
0

Нет.. не работает

Salim Murshed
9 сентября 2020 в 08:47
0

пожалуйста, проверьте последний ответ

Salim Murshed
30 сентября 2020 в 04:08
0

Соответствует ли это вашему требованию?

Paresh Mangukiya
20 октября 2020 в 03:32
0

Отвечает ли это на ваш вопрос? Flutter Navigator.pop(context) возвращает черный экран

Ответы (14)

avatar
Shahbaz
25 апреля 2020 в 12:37
12

После некоторых поисков в Интернете я обнаружил, что причиной проблемы является FloatingActionButton.

Я заменил FloatingActionButton на MaterialButton, и это решило мою проблему.

Sanket Vekariya
3 мая 2020 в 12:06
0

Если вы все еще хотите использовать плавающую кнопку, добавьте свойство плавающей кнопки под названием «herotag». Это работает для меня. 🙂

Taha Malik
28 ноября 2020 в 02:08
1

Да, в этом проблема, FloatingActionButton — это виджет героя с тегом героя по умолчанию, вы используете 2 floatActionButtons на своем экране без явного указания им heroTag. Таким образом, Flutter не может сказать, какого героя следует переместить на следующий экран, так как есть 2 виджета героя с одинаковым тегом. Итак, добавьте уникальный heroTag к обоим из вас FloatingActionButtons, подобно этому, к вашему FloatingActionButton.

Taha Malik
28 ноября 2020 в 02:10
1

Кроме того, удалите свой MaterialApp, нет смысла использовать 2 приложения материалов в одном приложении флаттера.

Taha Malik
28 ноября 2020 в 02:11
1

Кроме того, пожалуйста, примите ваш ответ как правильный, чтобы другие не пытались на него ответить.

avatar
Suretion
11 марта 2022 в 20:39
0

Если страница, на которую вы переходите, не содержит Scaffold, страница будет черной, поскольку Scaffold Реализует базовую структуру визуального макета Material Design, поэтому примените Scaffold и приложение материала родительского виджета.

avatar
lava
13 февраля 2022 в 14:01
6

До:

enter image description here

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('NEW TRIP'),
    );
  }
}

Итак, чтобы решить эту проблему, мы обернем новый виджет навигации с помощью scaffold widget

.

Решение после:

enter image description here

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Material(
        child: Text('NEW TRIP'),
      ),
    );
  }
}
avatar
Sai Krishna Alishala
16 ноября 2021 в 17:39
0
class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(      
              body: Text('NEW TRIP'),
            ),
    );
  }
}

удалите приложение материалов и верните каркас, все будет нормально

иначе, если у вас есть проблемы с плавающей кнопкой, добавьте

тег героя: "btn1",

heroTag: "btn2",

В поддереве есть несколько героев с одним и тем же тегом

avatar
Meet Patel
4 октября 2021 в 04:58
0

просто поместите подложку на следующей странице и все.

Community
4 октября 2021 в 06:06
0

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте, чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

avatar
Kavya S
29 мая 2021 в 14:39
2

Я считаю, что во всем приложении Flutter может быть только один MaterialApp виджет, потому что виджет MaterialApp, вероятно, будет основным или основным компонентом Flutter. Поэтому, когда вы пытаетесь перейти на новый экран, попробуйте вернуть виджет Scaffold вместо виджета MaterialApp.

class NewTrip extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(      
                  body: Text('NEW TRIP'),
        );
      }
    }
avatar
gsm
19 апреля 2021 в 15:50
0

FloatingActionButton — это проблема, поэтому, если вы действительно хотите использовать плавающие кнопки действий, вы должны добавить каждую из них в уникальный heroTag. Теперь вы сможете без проблем использовать FloatingActionButton. Никогда не используйте более одной плавающей кнопки действия без использования HeroTag на одной странице.

avatar
Zorro
1 апреля 2021 в 07:44
2

В моем случае это вызвано:

// to set portait screen orientation 
SystemChrome.setPreferredOrientation([
   DeviceOrientation.portraitUp,
   DeviceOrientation.portraitDown,
]);
// Instead i use `android:screenOrientation="portrait"` on my AndroidManifest.xml.

Это я объявил при отображении виджета страницы. Удалено, чтобы решить мою проблему с черным экраном.

avatar
Felipe Sales
18 января 2021 в 18:58
2

Используйте ThemeData , вместе с параметром scaffoldBackgroundColor .
Например:

ThemeData (
   scaffoldBackgroundColor: Colors.black,
)
avatar
Rasel Khan
24 декабря 2020 в 07:18
0

Изменить scaffoldBackgroundColor

theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,  //here
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}
avatar
Akshit Ostwal
21 ноября 2020 в 21:06
3

Проблема в том, что вы используете materialApp внутри другого materialApp

Навигатор просто меняет страницы, и нам не нужно отдельное приложение materialApp в NewTrip().

Таким образом, NewTrip должен выглядеть следующим образом

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}
avatar
Salim Murshed
9 сентября 2020 в 08:30
6

Пожалуйста, проверьте полное редактирование кода из вашего кода. На самом деле вы используете два FloatingActionButton. Поэтому вам нужно использовать два heroTag с разными именами. Я уже добавил в код. Нет проблем с классом NewTrip.

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page0(),
    );
  }
}

class Page0 extends StatefulWidget {
  @override
  _Page0State createState() => _Page0State();
}

class _Page0State extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF493597),
      body: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(top: 15.0, left: 10.0),
          ),
          SizedBox(
            height: 25.0,
          ),
          Padding(
            padding: EdgeInsets.only(left: 40.0),
            child: Row(
              children: [
                Text(
                  'Expense',
                  style: TextStyle(
                      fontFamily: 'Montserrat',
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 25.0),
                ),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  'What',
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    color: Colors.white,
                    fontSize: 25.0,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 60.0),
          Container(
            margin: EdgeInsets.only(
              left: 10.0,
              right: 10.0,
            ),
            height: MediaQuery.of(context).size.height - 150,
            decoration: BoxDecoration(
              color: Color(0xFFFCFCFC),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(75.0),
                topRight: Radius.circular(75.0),
              ),
            ),
            child: ListView(
              primary: false,
              padding: EdgeInsets.only(
                left: 15.0,
                right: 20.0,
                top: 25.0,
              ),
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 30.0,
                  ),
                  child: Column(
                    children: [
                      //greeting text
                      Row(
                        children: [
                          Expanded(
                            child: Center(
                              child: Text(
                                'Hello! :)',
                                style: TextStyle(
                                  fontFamily: 'Permanent-Marker',
                                  color: Colors.black,
                                  fontSize: 30.0,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                      SizedBox(
                        height: 30.0,
                      ),

                      //add button
                      Row(children: [
                        Expanded(
                          flex: 1,
                          child: Container(
                            height: 100.0,
                            width: 100.0,
                            child: FittedBox(
                              child: FloatingActionButton(
                                heroTag: "btn",
                                elevation: 10.0,
                                backgroundColor: Colors.white,
                                child: Icon(
                                  Icons.add,
                                  color: Colors.black,
                                ),
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => NewTrip()),
                                  );
                                },
                              ),
                            ),
                          ),
                        ),

                        //add text
                        Expanded(
                          flex: 1,
                          child: Text(
                            'New trip',
                            style: TextStyle(
                              fontFamily: 'Nanum',
                              fontSize: 30.0,
                            ),
                          ),
                        ),
                      ]),

                      SizedBox(
                        height: 30.0,
                      ),

                      //previous trip button
                      Row(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Container(
                              height: 100.0,
                              width: 100.0,
                              child: FittedBox(
                                child: FloatingActionButton(
                                  heroTag: "btn1",
                                  elevation: 10.0,
                                  backgroundColor: Colors.white,
                                  onPressed: () {},
                                  child: Icon(
                                    Icons.assessment,
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                            ),
                          ),

                          //previous trip text
                          Expanded(
                            flex: 1,
                            child: Text(
                              'Previous trips',
                              style: TextStyle(
                                fontFamily: 'Nanum',
                                fontSize: 30.0,
                              ),
                            ),
                          )
                        ],
                      ),

                      SizedBox(
                        height: 50.0,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Класс NewTrip

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}
avatar
Niteesh
29 июня 2020 в 14:05
10

Удалить MaterialApp()

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(      
       body: Text('NEW TRIP'),    
    );
  }
}
avatar
Shreyas C R
30 апреля 2020 в 07:22
18

Поэтому в NewTrip() удалите MaterialApp, так как он наследуется от родителя. Просто верните Scaffold.

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(      
       body: Text('NEW TRIP'),
    );
  }
}