Flutter widgets – Create pages, widget and list views

Continuing from previous post, for the part 1 of Flutter tutorials we will learn how to create pages, widgets and list views. Once your app is running, you can see the app in the device and any changes you make to the app will be reflected in the device.

Let’s create some Flutter widgets

We begin by removing the template code for the home page and replacing it with a new one that uses a Scaffold to provide a Material Design look and feel. Let’s create a new package for screens widgets and contains a new folder named components which will contain the widgets that we will use in our app. We will create a new file named home.

import 'package:flutter/material.dart';
import 'package:reddit_client/screens/home.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(title: 'Subreddit'),
    );
  }
}

Let’s create a new class called HomeScreen. This class will extend the StatelessWidget class and will have a build method. Next import necessary packages. Your app should hot reload when you save this file and see the changes on the device immediately.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final String title;

  const HomeScreen({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const Center(
        child: Text('Home Screen'),
      ),
    );
  }
}

Begin building the list view using a list view builder. ListView.builder is a widget that builds a list of any other widget.

final subreddits = ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Subreddit $index'),
    );
  },
);

We can easily give a list of texts or widgets to display. Let’s build a list of subreddits texts.

final redditNames = ['flutterDev', 'popular', 'images', 'funny', 'aww'];
final subreddits = ListView.builder(
  itemCount: redditNames.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(redditNames[index]),
    );
  },
);

Flutter List view

Now we can replace the main body of the screen with the a list view. This list view will contain the list of the subreddits that we want to display. Begin building the list view using a list view builder.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final String title;

  const HomeScreen({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final redditNames = ['flutterDev', 'popular', 'images', 'funny', 'aww'];
    final subreddits = ListView.builder(
      itemCount: redditNames.length,
      itemBuilder: (context, index) {
        return ListTile(
          onTap: () => print('${redditNames[index]} tapped'),
          leading: const Icon(
            Icons.reddit_outlined,
            color: Colors.deepOrangeAccent,
          ),
          trailing: const Icon(Icons.arrow_forward_ios),
          title: Text(redditNames[index]),
        );
      },
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: subreddits,
      ),
    );
  }
}

Now lets make this listTile more useful. We can add a leading icon to the list tile, also we can add a trailing icon and colors. On tap, we can navigate to the subreddit screen, but for now lets just print the subreddit name.

Congratulations, we have finished part 1 of this series of tutorials to learn flutter. In the next part we will explore ways to create new pages and navigate between them also we will create advanced custom widgets.

Source Code: https://github.com/techprd/reddit_client/tree/feature/Lesson_1