First Screen - Categories List

Let's create our first non-authentication page, the Categories list. This will become our starting point for building CRUD operations for our application.

Create a New Screen

Let's start by creating our new screen. We will create a new file categories_list.dart in the lib/screens/categories folder.

Note: We will build the file structure in small parts. This will help us to understand the code better.

import 'package:flutter/material.dart';

Next, we need to create a new class. But this time, it is not a StatelessWidget. Instead, we will expect to have a State class.

This is required to manage the state of the screen. We will create a new class CategoriesList that extends StatefulWidget. This class will return a new class, CategoriesListState that extends State<CategoriesList>.

// ...
 
class CategoriesList extends StatefulWidget {
  @override
  CategoriesListState createState() => CategoriesListState();
}
class CategoriesListState extends State<CategoriesList> {
}

It looks complicated, but in short - we will initialize our page using CategoriesList, but everything will be managed by CategoriesListState. So, let's create two state variables:

import 'package:flutter/material.dart';
class CategoriesList extends StatefulWidget {
  @override
  CategoriesListState createState() => CategoriesListState();
}
class CategoriesListState extends State<CategoriesList> {
  final List<String> categories = [
    'Electronics',
    'Fashion',
    'Home & Garden',
    'Sporting Goods'
  ];
 
  int clicked = 0;
}

These variables will react to screen changes. We will use categories to display the list of categories and clicked to visualize the click event.

Okay, let's add the categories List using ListView.builder:

import 'package:flutter/material.dart';
 
class CategoriesList extends StatefulWidget {
  @override
  CategoriesListState createState() => CategoriesListState();
}
 
class CategoriesListState extends State<CategoriesList> {
  final List<String> categories = [
    'Electronics',
    'Fashion',
    'Home & Garden',
    'Sporting Goods'
  ];
 
  int clicked = 0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Categories clicked $clicked times'),
        ),
        body: Container(
            color: Theme
                .of(context)
                .primaryColor,
            child: Center(
                child: ListView.builder(
                    itemCount: categories.length,
                    // Must be the length of the list
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        title: Text(
                          categories[index],
                          style: TextStyle(color: Colors.white),
                        ),
                        onTap: () => setState(() => clicked++)
                      );
                    }))));
  }
}

A few important things to note:

1. ListView.builder is used to create a list of items.
2. itemCount is the length of the list - which is mandatory to provide.
3. We have an onTap() event on ListTile that increments the clicked variable.
4. We have used setState() to update the state of the screen.
5. We display the clicked variable in the AppBar title.

But why do we need the setState() method? In Flutter, the setState() method notifies the framework that the object's internal state has changed. This triggers a rebuild of the widget. Otherwise, the changes will not be reflected on the screen.

Register the Screen

Okay, now that we have created our screen, let's register it in the routes map in the main.dart file.

import 'package:flutter/material.dart';
import 'package:laravel_api_flutter_app/Screens/Auth/Login.dart';
import 'package:laravel_api_flutter_app/Screens/Auth/Register.dart';
import 'package:laravel_api_flutter_app/screens/categories/categories_list.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Login(),
      routes: {
        '/login': (context) => Login(),
        '/register': (context) => Register(),
        '/categories': (context) => CategoriesList(),
      },
    );
  }
}

It's a simple registration, but we still can't access the screen. Let's make that happen.

Modify Registration to Redirect to Categories List

We will "hijack" the Registration screen to redirect to the Categories List screen. This is just for testing purposes.

lib/screens/auth/Register.dart

// ...
 
ElevatedButton(
  onPressed: () {
    print('Login button pressed');
    Navigator.pushNamed(context, '/categories');
  },
  child: Text('Login'),
  child: Text('Register'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.purple,
    foregroundColor: Colors.white,
    minimumSize: Size(double.infinity, 40),
  ),
),
 
// ...

Once the application reloads, we can go to the Register screen and click the Register button. This should redirect us to the Categories List screen:

We can see the list rendering and click on each category. With each click, the clicked variable will be updated in the AppBar title.

In the next lesson, we will work on fixing some code issues that we have. It's a good practice to keep your code clean and organized.

Check out the GitHub Commit for this lesson.