Как перейти на другой экран в флаттере

Question

Я создал простую веб-программу для изучения кода.

Я пытался перемещаться между двумя экранами в веб-среде. Но один раз, когда я нажимаю кнопку на первом экране и перехожу на второй экран, второй экран отображается пустым с флагом отладки в правом верхнем углу. Как только я refre sh, приходят данные второго экрана.

Как решить эту проблему?

Вот код

import 'package:temp/providers/Incriment_provider.dart';
import 'package:temp/screens/Detail_screen.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<IncrimentProvider>(
      create: (btx) => IncrimentProvider(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(

          primarySwatch: Colors.blue,
        ),
        initialRoute: '/',
        routes: {

          DetailScreen.routeName: (ctx) => DetailScreen(),},
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<IncrimentProvider>(context, listen: false);

    return Scaffold(
      appBar: AppBar(

        title: Text('Main Screen'),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer<IncrimentProvider>(builder: (ctx,counter,ch)=>Text(
                '${counter.count}',
                style: Theme.of(context).textTheme.headline4,
              ),

            ),
            FloatingActionButton(
              onPressed: () {
                Navigator.pushNamed(context,DetailScreen.routeName);
              },
              tooltip: 'Press the button',
              child: Icon(Icons.view_agenda),
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.incrimentor(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}


import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:temp/providers/Incriment_provider.dart';

class DetailScreen extends StatelessWidget {
  static const routeName='/Detail_screen';
  @override
  Widget build(BuildContext context) {
    final counter=Provider.of<IncrimentProvider>(context);
    return Scaffold(

      body: Center(child:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('The incrimented value is ${counter.count}'),

        ],

      ),),

    );

  }

}


import 'package:flutter/material.dart';

class IncrimentProvider with ChangeNotifier{
 int _count=0;

int get count=> _count;

void incrimentor (){
  _count+=1;

  notifyListeners();
}
}

Answer 1

Измените свой навигатор на:

Navigator.of(context).pushNamed(DetailScreen.routeName);

, и ваш DetailScreen не нуждается в столбце, так как виджет Center выполняет вашу логику c.

Кроме того, при таком «странном» поведении всегда полезно разместить здесь свой flutter doctor -v, чтобы мы могли сказать, используете ли вы другую версию Flutter , если плагины и т.д. c.

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

Answer 2

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

import 'package:flutter/material.dart';
import 'package:temp/screens/Detail_screen.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(

          primarySwatch: Colors.blue,
        ),
        initialRoute: '/',
        routes: {

          DetailScreen.routeName: (ctx) => DetailScreen(),},
        home: MyHomePage(),
      );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    int count=0;

void incriment(){
  setState(() {
    count+=1;
    print(count);
  });
}
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text('Main Screen'),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
    Text(
                '$count',
                style: Theme.of(context).textTheme.headline4,
              ),


            FloatingActionButton(
              onPressed: () {
                Navigator.of(context).pushNamed(DetailScreen.routeName,arguments: count);
              },
              tooltip: 'Press the button',
              child: Icon(Icons.view_agenda),
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: incriment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

import 'package:flutter/material.dart';


class DetailScreen extends StatelessWidget {
  static const routeName='/Detail_screen';
  @override
  Widget build(BuildContext context) {
    final count=ModalRoute.of(context).settings.arguments as int;
    return Scaffold(

      body: Center(child:Text('The incrimented value is $count',style: TextStyle(color: Colors.black),),),

    );

  }

}

PS: я тестирую этот код в браузере Chrome, где наблюдается эта проблема. Я не тестировал ни в одном эмуляторе.

Пожалуйста, запустите код в браузере chrome.