Let's summarize the requirements for this app, as follows:
- The app must work for iOS, Android, and the web.
- The favorite books need to be saved locally.
- Depending on the screen size, we will show the user a different layout.
As of Flutter version 1.14, web development for Flutter is available in the beta channel, and you need to set up the environment to explicitly enable web support. However, please check if this is still true when you read this information on the official documentation page at https://flutter.dev/web.
The cli commands required to add web support to your environment are detailed as follows:
- Open your Terminal/command prompt and type the following commands to enable the beta channel and web development:
flutter channel beta
flutter config --enable-web
- Run the flutter devices command, as follows:
flutter devices
If the web is enabled, you should see a Chrome device, as shown here:
- Create a new Flutter app with your favorite editor, and then move to the folder where you saved the new project.
- Next, run the app specifying the Chrome browser as a device, as follows:
flutter run -d chrome
This will open the Chrome browser with your Flutter app, and a local web server serving the app. Maybe for the first time since you started reading this book, you'll see the Flutter example app running in Chrome, as shown here:
The thing that should be obvious the first time you see the example app in your browser is the impressive amount of space you have to deal with. This is one of the challenges you must consider when you design an app that can run both on mobile devices and on the web (or desktop). In this chapter, we'll see a few suggestions that may help you make responsive apps that allow different form factors.