Your Second Flutter App

To continue on your Flutter journey, in this course you’ll build an app named RW Courses.

The app will use the raywenderlich.com API to show video course data. You’ll build the app starting from a new project in Visual Studio Code. You can also use Android Studio if you prefer, but you’ll have to adjust the instructions given as we work our way through the course.

Before you proceed, make sure you have a Flutter development environment set up. That will include the Flutter and Dart SDKs, Xcode for macOS, and Android Studio with the Android SDK.

Demo

To get started working with a new Flutter project, a good habit is to run Flutter doctor to make sure everything is working as designed. Now, I’m using macOS command-spacebar to access the terminal. If you are using windows, you can search for command line by searching from the start menu.

command-space (search terminal)
flutter doctor

My Flutter install is good to go. If you have issues, you should look into fixing them before you get started. See Your First Flutter App for more information. I’ve provide a link in the Author Notes.

Next, open up Visual Studio Code. We’re going to create a new Flutter project. From the menu, select View and Command Palette. You may see Flutter: New Application Project. If not, search for Flutter and then you should see it listed. Select your Desktop or some other suitable location. Then click the button Select a folder to create the project in. You now have a new Flutter project. Give it the name rwcourses. It will take a few moments but soon you will have a brand new Flutter project. Well done!

Next we need to set up some constants. Select the lib folder and create a new file called strings.dart. This is a file that contains constant strings that will be displayed in the user interface of the app. Add the following:

class Strings {
  static String appTitle = 'RW Courses';
  static String filter = 'Filter';
  static String ios = 'iOS';
  static String android = 'Android';
  static String flutter = 'Flutter';
  static String unity = 'Unity';
  static String sss = 'Server-Side Swift';
  static String macos = 'macOS';
  static String archived = 'Archived';
  static String all = 'All';
  static String unknown = 'Unknown';
}

Next, we need some constants that we’ll be using throughout the app. In the lib folder, create a new file called constants.dart. Add the following:

class Constants {
  // Values from the RW API
  static const String iosDomain = '1';
  static const String androidDomain = '2';
  static const String unityDomain = '3';
  static const String macosDomain = '5';
  static const String archivedDomain = '6';
  static const String sssDomain = '8';
  static const String flutterDomain = '9';

  // Values stored in preferences
  static const int iosFilter = 1;
  static const int androidFilter = 2;
  static const int flutterFilter = 9;
  static const int sssFilter = 8;
  static const int unityFilter = 3;
  static const int macosFilter = 5;
  static const int allFilter = 0;
  static const int otherFilter = -1;

  static const String filterKey = 'FILTER_KEY';
}

Okay, we have our strings and our constants. Now to create our first widget. This widget will list all of our courses. First, in the lib folder, create a new folder called ui. Then, create another folder inside the ui folder called courses. In the courses folder, create a new file called courses_page.dart.

Now, to create a new StatefulWidget. You could do a lot of typing, but instead, just type st. From the dropdown, type insert stateful widget.

You’ll get a whole bunch of code with your cursor set after the class declaration. Give it the name CoursesPage.

class CoursesPage extends StatefulWidget {
  const CoursesPage({ Key? key }) : super(key: key);

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

class _CoursesPageState extends State<CoursesPage> {
  @override
  Widget build(BuildContext context) {
    return Container(

    );
  }
}

We’re getting a lot of errors because we haven’t imported the Material library yet. Select the StatefulWidget and click Command-period on the macOS or Ctrl-period on Windows. Import the materials library.

Once imported, have CoursesPageState return a Text instead of an empty container.

return Text('RWCourses');

class _CoursesPageState extends State<CoursesPage> {
  @override
  Widget build(BuildContext context) {
    return const Text('RWCourses');
  }
}

Now to create a new stateless widget for the entire app itself. This will display the navigation bar title as well as display the new courses page. In the lib folder, create a new file called rwcourses_app.dart.

In your new file, create a new stateless widget by typing st and selecting insert stateless widget. Give it the name, RWCoursesApp.

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Import the material library by selecting the StatelessWidget and on macOS, press command+. and on windows, press control+..

Next, we need to add an app bar. First change the returned Container to a Scaffold widget.

Widget build(BuildContext context) {
  return Scaffold();
}

The scaffold widget allows you add drawers, snack bars and bottom sheets to your app. Put this Scaffold to work by adding an AppBar, using the app title from your Strings constant file.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(Strings.appTitle),
    ),
  );
}

We’re getting an error because we haven’t imported the Strings constants file. You can select it and press command-period on mac or control-period on windows. This imports the String constants file.

import 'strings.dart';

At this point, it’s time to update our main app. Open up main.dart and delete everything . Now, to add our new app. Create a new MaterialApp. This will use Android theming. You’ll pass in the app title and theme data. For the home, pass in the RWCoursesApp.

void main() => runApp(MaterialApp(
      title: Strings.appTitle,
      theme: ThemeData(primaryColor: Colors.green.shade800),
      home: const RWCoursesApp(),
    ));

Finally, import the missing strings.dart file.

import 'strings.dart';

And that’s it. We have our app almost setup. In the file navigator, you’ll notice that there is test folder. We won’t be using unit tests in this app so you can delete it. We also won’t be deploying this app to the web so if you see a web folder, you can delete that as well.

At this point either launch an iOS simulator or launch the Android emulator. Now with main selected and your device selected, press F5 to launch your app. You’ll be prompted to launch dart dev tools. You’ll explore them later in this course. For now, select not now. And with that, we have the beginnings of our courses app in place. Nice job.