Flutter Program for defining Map routes for Multiple types of list of Categories in Flutter

To redefine the routes map for multiple types of categories, you can separate the routes based on the category type. Here’s an updated code snippet:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
final Map<String, WidgetBuilder> routes = {
'/': (context) => HomeScreen(),
'/video': (context) => VideoCategoriesScreen(),
'/flashcards': (context) => FlashcardCategoriesScreen(),
'/video/category1': (context) => VideoCategoryScreen(category: 'Category 1'),
'/video/category2': (context) => VideoCategoryScreen(category: 'Category 2'),
'/video/category3': (context) => VideoCategoryScreen(category: 'Category 3'),
'/flashcards/categoryA': (context) => FlashcardCategoryScreen(category: 'Category A'),
'/flashcards/categoryB': (context) => FlashcardCategoryScreen(category: 'Category B'),
};

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Category App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: routes,
);
}
}

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/video');
},
child: Text('Video Categories'),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/flashcards');
},
child: Text('Flashcard Categories'),
),
],
),
),
);
}
}

class VideoCategoriesScreen extends StatelessWidget {
final List<Category> videoCategories = [
Category(name: 'Category 1', route: '/video/category1'),
Category(name: 'Category 2', route: '/video/category2'),
Category(name: 'Category 3', route: '/video/category3'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Video Categories'),
),
body: ListView.builder(
itemCount: videoCategories.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(videoCategories[index].name),
onTap: () {
Navigator.pushNamed(context, videoCategories[index].route);
},
);
},
),
);
}
}

class FlashcardCategoriesScreen extends StatelessWidget {
final List<Category> flashcardCategories = [
Category(name: 'Category A', route: '/flashcards/categoryA'),
Category(name: 'Category B', route: '/flashcards/categoryB'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flashcard Categories'),
),
body: ListView.builder(
itemCount: flashcardCategories.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(flashcardCategories[index].name),
onTap: () {
Navigator.pushNamed(context, flashcardCategories[index].route);
},
);
},
),
);
}
}

class VideoCategoryScreen extends StatelessWidget {
final String category;

VideoCategoryScreen({required this.category});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(category),
),
body: Center(
child: Text('This is $category Video Category Screen'),
),
);
}
}

class FlashcardCategoryScreen extends StatelessWidget {
final String category;

FlashcardCategoryScreen({required this.category});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(category),
),
body: Center(
child: Text('This is $category Flashcard Category Screen'),
),
);
}
}

class Category {
final String name;
final String route;

Category({required this.name, required this.route});
}

In this updated example, we have separate screens for video categories (VideoCategoriesScreen) and flashcard categories (FlashcardCategoriesScreen). Each screen has its own list of categories with associated routes.

The HomeScreen displays two buttons, one for video categories and another for flashcard categories. When the buttons are tapped, it navigates to the respective category screen (VideoCategoriesScreen or FlashcardCategoriesScreen), which displays the list of categories. Tapping on a category in each screen navigates to the corresponding category screen (VideoCategoryScreen or FlashcardCategoryScreen).

You can adjust the routes and categories as per your specific needs.