Lohani Taking Flutter to the Web

Learn how to build cross-platform UIs for web and mobile platforms using Flutter for Web
1. Auflage 2024
ISBN: 978-1-80181-913-8
Verlag: De Gruyter
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Englisch, 206 Seiten

Using a shared codebase in addition to an extensive range of tools in the Flutter ecosystem optimized for browsers, the Flutter framework has expanded to enable you to bring your mobile apps to the web. You'll find out how web developers can leverage the Flutter framework for web apps with this hands-on guide.
Taking Flutter to the Web will help you learn all about the Flutter ecosystem by covering the tools and project structure that allows you to easily integrate Flutter into your web stack. You'll understand the concepts of cross-platform UI development and how they can be applied to web platforms. As you explore Flutter on the web, you'll become well-versed with using Flutter as an alternative UI platform for building adaptive and responsive designs for web apps.
By the end of this Flutter book, you'll have built and deployed a complete Flutter app for the web and have a roadmap ready to target the web for your existing Flutter mobile apps.

Autoren/Hrsg.

Lohani, Damodar

Fachgebiete

• Mathematik | Informatik EDV | Informatik Digital Lifestyle Internet, E-Mail, Social Media
• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Web Services
• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Webprogrammierung

Inhaltsverzeichnis

Table of Contents - Getting Started with Flutter on the Web
- Creating Your First Web App
- Building Responsive and Adaptive Designs

- Flutter Web under the Hood

- Understanding Routes and Navigation
- Architecting and Organizing
- Implementing Persistence
- State Management in Flutter
- Integrating Appwrite
- Firebase Integration
- Building and Deploying a Flutter Web Application

Leseproben

2

Creating Your First Web App

In the previous chapter, we introduced you to Flutter on the web. In this chapter, we will start exploring the basics of Flutter web. We will begin by creating a new Flutter project, which we will complete during the course of this book.

By the end of this chapter, you will be able to create and run a new Flutter project with web support. You will also learn about basic Flutter widgets, and then go on to learn about Flutter layout widgets to build different layouts. We will also develop a basic UI required for our application. We will be building an online learning platform, a lightweight version of Udemy.

In this chapter, we will cover the following main topics:

• Creating a new Flutter project with Flutter web
• Using basic widgets
• Building layouts

Technical requirements

The technical requirements for this chapter are as follows:

• Flutter version 3.0 or later installed and running
• Visual Studio Code or Android Studio
• Google Chrome browser

You can download the code samples for this chapter and other chapters from the book’s official GitHub repository at https://github.com/PacktPublishing/Taking-Flutter-to-the-Web. The starter code for this chapter can be found inside the chapter2_start folder.

Creating a new Flutter project with Flutter web

In the last chapter, we already created our Flutter project with web support. In this chapter, we will start our project for this book. As before, let’s create our new project:

flutter create flutter_academy

This command will create a new Flutter project, and if you have followed the steps from the previous chapter, you should already have web enabled. This new project should be created with web support.

Now, make sure you can run your project using the following command from your terminal, or by tapping after opening the project in Visual Studio Code:

flutter run -d chrome

As we will have already coded some starter code, copy the files inside chapter2_start/lib to the lib folder of the project you just created. We have some basic widgets already set up here, which we will talk about in the next section.

Using basic widgets

We will start by revising some basics, which will involve creating sections of our home page. To begin, open the chapter2_start/lib/widgets/featured_section.dart file and start updating the code as the following.

First, we will create a stateless widget:

import 'package:flutter/material.dart'; class FeaturedSection extends StatelessWidget {   const FeaturedSection({ Key? key }) : super(key: key);   @override   Widget build(BuildContext context) {     return Container();   } }

Here, we are creating a stateless widget that just displays a blank container. Our featured section will have an image, a title, a description, and a button. We want to display the image on the left and content on the right, or vice versa. Let’s add our image and content. Update the body of the build method, as follows:

return Container(   child: Row(     children: [       Image.asset("image"),       Text("Title"),       Text("Description"),       ElevatedButton(         child: Text("Button"),         onPressed: (){},       )     ],   ), );

Here, we added a Row widget as a child of the container. The Row widget allows us to render its child widget horizontally. However, we want the content to be vertically stacked one after another. So, let’s update the children of row, as follows:

children: [   Expanded(child: Image.asset("image")),   Expanded(     child: Column(       children: [         Text("Title"),         Text("Description"),         ElevatedButton(           child: Text("Button"),           onPressed: () {},         )       ],     ),   ) ],

Here, we are wrapping our Image widget with an Expanded widget. That will expand to take the available space on the row. We are also wrapping the right-side content with an Expanded widget, so both contents will take exactly 50% of the available space. In order to display the content vertically, we are using the Column widget. Now, all that remains to do is to add parameters to receive the image path, title, description, button text, and the button onPressed handler. Let’s add those parameters:

class FeaturedSection extends StatelessWidget {   const FeaturedSection({     Key? Key,     required this.image,     required this.title,     required this.description,     required this.buttonLabel,     required this.onActionPressed,   }) : super(key: key);   final String image;     final String title;   final String description;   final String buttonLabel;   final Function() onActionPressed; ...

We have updated the class constructor, as well as added class properties to accept the title, description, button label, and button-pressed function handler. Now, we will use these in our widgets. To do that, update the build method with the following:

return Container(   child: Row(     children: [       Expanded(child: Image.asset(image)),       Expanded(         child: Column(           children: [             Text(title),             Text(description),             ElevatedButton(               child: Text(buttonLabel),               onPressed: onActionPressed,             )           ],         ),       )     ],   ), );

Here, we are using the properties to display our image and content instead of hardcoding the values. This will allow us to use this widget multiple times, each instance with different values. Using the FeaturedSection widget we have created here will enable multiple featured sections with different properties to appear on our home page. Finally, we will now add some styles to our code.

Let’s first style the title. Replace the title text with the following:

Text(   title,   style: Theme.of(context).textTheme.headline3, ),

Here, we are giving the headline3 text theme for the title. The style comes from the default theme applied to our application, so that later we can update the theme to update the overall style of the text everywhere in the app, instead of updating individual styles.

Finally, we will add some spacing and alignments to make the widget look nicer. Update the build method, as follows:

return Container(   width: 1340,   padding: const EdgeInsets.all(32.0),   child: Row(     children: [       Expanded(         child: Image.asset(           image,           height: 450,         ),       ),       const SizedBox(width: 20.0),       Expanded(         child: Column(           children: [             Text(               title,               style: Theme.of(context).textTheme.headline3,             ),             const SizedBox(height: 20.0),             Text(description),             const SizedBox(height: 10.0),             ElevatedButton(               child: Text(buttonLabel),               onPressed: onActionPressed,             )           ],         ),       )     ],   ), );

Here, we have added some spacing between contents using the SizedBox widget. We have also given a fixed height to our Image to keep the size constant, no matter the size of the image used. We also gave a fixed width to our wrapping container so that it won’t take up the whole screen’s width. Then, we added some padding around the content by passing padding to the wrapping container. This completes our featured section widget. The complete code for this can be found in the chapter2_final/lib/widgets/featured_section.dart folder.

Let’s also build the CourseCard widget that we will use to display the list of courses on our home page. We will begin by creating a new stateless widget and then add some properties, as we did in the previous section. Create a new file called chapter2/lib/widgets/course_card.dart and update it as follows:

import 'package:flutter/material.dart'; class CourseCard extends StatelessWidget {   const CourseCard({     Key? key,     required this.image,     required this.title,     required this.onActionPressed,     required this.description,   }) : super(key: key);   final String image;   final String title;   final Function() onActionPressed;   final String description;   @override   Widget build(BuildContext context) {     return Container();   } }

Here, we created a simple stateless widget and added properties for the image, title, description, and action handler, which is similar to what we used before to build our FeaturedSection widget. Now, we will...

Über Autor(innen)

Lohani Damodar :

Damodar Lohani is a software engineer at Appwrite. He is a Google Developer Expert for Flutter and Dart.