如何使用 Dart 解决 Flutter 应用程序中的路由错误？

Question

I am working on a flutter app with Dart as backend language. While trying to navigate through a page using
Navigator.of(context).NamedRoute()
I got an error message
Could not find a generator for route RouteSettings("/item-category", {id: Vegetables, title: Vegetables}) in the _WidgetsAppState. I have done the necessary imports in each widget but haven't mentioned in the code.

My main.dart file is:

class ItemListScreen extends StatefulWidget {
  static const routeName = '/item-list';

  @override
  _ItemListScreenState createState() => _ItemListScreenState();
}

class _ItemListScreenState extends State<ItemListScreen> {
  @override
  Widget build(BuildContext context) {
    final routeArgs =
        ModalRoute.of(context).settings.arguments as Map<String, String>;
    final categoryTitle = routeArgs['title'];
    final categoryId = routeArgs['id'];
    final categoryItems = ITEMS_DATA.where((item) {
      return item.categories.contains(categoryId);
    }).toList();
    return Scaffold(
      appBar: AppBar(
        title: Text(categoryTitle),
      ),
      body: ListView.builder(
        itemBuilder: (ctx, index) {
          return EachItem(
            id: categoryItems[index].id,
            title: categoryItems[index].title,            
          );
        },
        itemCount: categoryItems.length,
      ),
    );
  }
}

The screen for displaying the Items screen is in class ItemListScreen and the code is as:

enum Condition {
  Fresh,
  Frozen,
  Immediate_sale,
}

enum Status {
  Available,
  Pending,
  Sold,
}

class Item {
  final String id;
  final List<String> categories;
  final String title;
  final String imageUrl;
  final double price;
  final String priceType;
  // final DateTime harvestDate;
  final Condition condition;
  final Status status;
  final bool isOrganic;
  final Map location;

  const Item({
    @required this.id,
    @required this.categories,
    // may be more than one category
    @required this.title,
    @required this.imageUrl,
    @required this.price,
    @required this.priceType,
    // eg.per kg/per 12/per 100
    // @required this.harvestDate,
    @required this.condition,
    // fresh/frozen/should go immediately
    @required this.status,
    // sold/pending/available
    @required this.location,
    @required this.isOrganic,
  });
}

The model design of the Each items is class Item.

class EachItem extends StatelessWidget {
  final String id;
  final String title;
  /*final String imageUrl;
  final double price;
  final String priceType;
  // final DateTime harvestDate;
  final Condition condition;
  final Status status;
  final bool isOrganic;*/

  EachItem({
    @required this.id,
    // may be more than one category
    @required this.title,
    /*@required this.imageUrl,
    @required this.price,
    @required this.priceType,
    // eg.per kg/per 12/per 100
    // @required this.harvestDate,
    @required this.condition,
    // fresh/frozen/should go immediately
    @required this.status,
    // sold/pending/available
    @required this.isOrganic,*/
  });

  void selectItem(BuildContext context) {
    Navigator.of(context).pushNamed(
      ItemListScreen.routeName,
      arguments: id,
    );
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectItem(context),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5),
        ),
        elevation: 4,
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Positioned(
                  bottom: 20,
                  right: 10,
                  child: Container(
                    width: 300,
                    color: Colors.black54,
                    padding: EdgeInsets.symmetric(
                      vertical: 5,
                      horizontal: 20,
                    ),
                    child: Text(
                      title,
                      style: TextStyle(
                        fontSize: 26,
                        color: Colors.white,
                      ),
                      softWrap: true,
                      overflow: TextOverflow.fade,
                    ),
                  ),
                )
              ],
            ),                
          ],
        ),
      ),
    );
  }
}

The widget for each item in the children of row builder of the screen is as follows:

const ITEMS_DATA = const [
  Item(
    id: '1',
    title: 'Apple',
    categories: ['Fruits'],
    price: 3.5,
    priceType: 'per kg',
    // harvestDate: DateTime.parse('2012-02-27 13:27:00'),
    condition: Condition.Fresh,
    status: Status.Available,
    isOrganic: true,
    location: null,
    imageUrl:
        'https://cdn.pixabay.com/photo/2018/04/09/18/26/asparagus-3304997_1280.jpg',
  ),
];

ATM I haven't connected to the firebase and used dummy data as data provider in my code. Dummy data for one item is as follows:

 const ITEMS_DATA = const [ Item( id: '1', title: 'Apple', categories: ['Fruits'], price: 3.5, priceType: 'per kg', // harvestDate: DateTime.parse('2012-02-27 13:27:00'), condition: Condition.Fresh, status: Status.Available, isOrganic: true, location: null, imageUrl: 'https://cdn.pixabay.com/photo/2018/04/09/18/26/asparagus-3304997_1280.jpg', ), ];

Answer 1

ItemListScreen.routeName: (ctx) => ItemListScreen(),