Flutter页面导航报错：需1个位置参数但传入0个，求解决方案

问题背景 #

从WelcomePage导航到TabsScreen时，出现错误提示：1 positional argument(s) expected, but 0 found，相关代码如下：

welcome_screen.dart 部分代码 #

class WelcomePage extends StatelessWidget {
  static const routeName = '/welcome-screen';
  const WelcomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.black,
        child: Stack(
          children: [
            Positioned.fill(
              child: Opacity(
                opacity: 0.3,
                child: Image.asset('assets/images/of_main_bg.png', fit: BoxFit.cover),
              ),
            ),
            ThemeButton(
              label: "Get Started!",
              labelColor: AppColors.MAIN_COLOR,
              color: Colors.transparent,
              highlight: AppColors.MAIN_COLOR.withOpacity(0.5),
              borderColor: AppColors.MAIN_COLOR,
              borderWidth: 4,
              onPressed: () {Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) {
                    return TabsScreen(**ERROR**#What should I write here);
                  },
                ),
              );
            },
          ],
        ),
      ),
    );
  }
}

main.dart 中的路由配置 #

initialRoute: '/', // default is '/'
  routes: {
    '/': (ctx) => WelcomePage(),
    CategoryMealsScreen.routeName: (ctx) => CategoryMealsScreen(_availableMeals),
    MealDetailScreen.routeName: (ctx) => MealDetailScreen(_toggleFavorite, _isMealFavorite),
    FiltersScreen.routeName: (ctx) => FiltersScreen(_filters, _setFilters),
    TabsScreen.routeName: (ctx) => TabsScreen(_favoriteMeals),
    WelcomePage.routeName: (ctx) => WelcomePage(),
  },

tabscreen.dart 类代码 #

class TabsScreen extends StatefulWidget {
  static const routeName = '/tabs-screen';
  final List<Meal> favoriteMeals;

  TabsScreen(this.favoriteMeals);
}

错误原因 #

TabsScreen的构造函数定义了必填的位置参数favoriteMeals，但在WelcomePage中实例化TabsScreen时未传入该参数，导致报错。

两种可行的解决方法 #

方法一：直接传递构造参数 #

需要将main.dart中的_favoriteMeals传递到WelcomePage，再传递给TabsScreen：

1. 给WelcomePage添加构造参数：

class WelcomePage extends StatelessWidget {
  static const routeName = '/welcome-screen';
  final List<Meal> favoriteMeals;
  const WelcomePage({Key key, required this.favoriteMeals}) : super(key: key);

  // 剩余代码不变
}

2. 更新main.dart中WelcomePage的路由配置，传入参数：

routes: {
  '/': (ctx) => WelcomePage(favoriteMeals: _favoriteMeals),
  // 其他路由保持不变
}

3. 在WelcomePage的导航代码中传入参数：

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) {
        return TabsScreen(favoriteMeals);
      },
    ),
  );
},

方法二：使用命名路由跳转（更推荐） #

既然已经在main.dart中配置了TabsScreen的命名路由，且已在路由中处理了_favoriteMeals的传递，直接使用命名路由跳转即可，无需手动实例化TabsScreen：
修改WelcomePage中的onPressed代码：

onPressed: () {
  Navigator.pushNamed(context, TabsScreen.routeName);
},

这种方法无需修改WelcomePage的构造函数，完全利用已有路由配置，符合Flutter路由设计规范，代码更简洁。

内容的提问来源于stack exchange，提问作者Jayaditya Mishra