时间戳

首页 > 解决方案 > 如何在 Flutter Web 中导航到其他屏幕

flutter - 如何在 Flutter Web 中导航到其他屏幕

问题描述

我创建了一个简单的代码练习flutter web。

我一直在尝试在颤振网络中的两个屏幕之间导航。但是我单击第一个屏幕中的按钮并导航到第二个屏幕，第二个屏幕显示为空白，右上角有调试标志。一旦我刷新第二个屏幕数据就来了。

如何解决这个问题？

这是代码

import 'package:temp/providers/Increment_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<IncrementProvider>(
      create: (btx) => IncrementProvider(),
      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<IncrementProvider>(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<IncrementProvider>(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.incrementor(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}


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

class DetailScreen extends StatelessWidget {
  static const routeName='/Detail_screen';
  @override
  Widget build(BuildContext context) {
    final counter=Provider.of<IncrementProvider>(context);
    return Scaffold(
     
      body: Center(child:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('The incremented value is ${counter.count}'),
         
        ],
       
      ),),
       
    );
    
  }
  
}


import 'package:flutter/material.dart';

class IncrementProvider with ChangeNotifier{
 int _count=0;

int get count=> _count;

void incrementor (){
  _count+=1;

  notifyListeners();
}
}

标签： flutterflutter-web

解决方案

将您的导航器更改为：

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

并且您的DetailScreen不需要该列，因为Center Widget 正在执行您的逻辑。

此外，对于这种“奇怪”的行为，在这里发布你的总是好的，flutter doctor -v这样我们就可以判断你是否使用了不同版本的Flutter，插件是否是最新的等等。

另外，我建议您先从 DetailScreen中删除您的提供程序，看看这是否会影响行为。我在没有您的 Provider 类的情况下尝试了您的代码，并使用 iOS 模拟器工作。另外，要仔细检查，请在文本上强制使用TextStyle颜色，以确保设备中的深色/浅色主题也不会影响它。

推荐阅读