Introduction
The Flutter framework enables developers to create native Android and iOS apps using a single codebase. In addition to mobile apps, Flutter can be used to develop web apps and desktop apps as well. The aim of this article is to show you how to get started with developing web apps using the Flutter framework.
What is Flutter?
Flutter is a cross-platform mobile app development framework created by Google. It allows developers to create native Android and iOS apps using a single codebase. In addition to mobile apps, Flutter can be used to develop web apps and desktop apps as well.
Why use Flutter for web development?
There are several reasons why you might want to use Flutter for web development:
-Flutter uses Dart, a fast, object-oriented language that is easy to learn.
-Flutter’s hot reload feature helps you quickly iterate on your design and add new features.
-Flutter’s widget library includes a wide variety of both Material Design (Android) and Cupertino (iOS) widgets. This means that your app will have a consistent look and feel across platforms.
-Flutter apps are fast and responsive because they are compiled directly into native code.
Creating a new Flutter project
To create a new Flutter project, open up Android Studio and click “Create New Project”. Select “Flutter” from the list of project types and click “Next”. Enter a project name (I’ll be using “flutter_web_demo”) and click “Finish”.
Once your project has been created, open up the “pubspec.yaml” file located in the root directory of your project. This file is used to specify the dependencies of your project. We need to add two dependencies:
-The first dependency is the flutter_web package which contains the necessary libraries for developing webapps with Flutter:
dependencies:
flutter:
sdk: flutter
fl_icons: ^8.0+2
# The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons.:
cupertino_icons: ^0.1 .10
# Add this line at the end of file
flutter_web: any # or latest version
-The second dependency is the intl package which provides internationalization support for Dart/Flutternation support for date/number formatting etc.: dependencies: intl: “^0..10” . Now that our pubspec file has been updated, we can get our dependencies by running flutter pub get in terminal from within our project directory.. Folder Structure . After running fluttern pub get in terminal, you should see that two new directories– .packages and build –have been created in your project directory along with some generated Dart files.. The build directory contains all the generated files whenever we build our project–more on this later.. The .packages file contains references to all the packages that we have added as dependencies in our pubspec.. yaml file.. If we open up this file, we should see references to both intl and flutternation.. Now that we have our dependencies configured, let’s take a look at our project structure.. If we open up the lib directory, we should see two files– main..dart and material../ cupertino../dart–these files contain pre-generated code for Material Design (Android) and Cupertino (iOS) themed applications respectively… We won’t be needing these files for our web application so feel free go ahead and delete them… Creating a home page The first thing we need to do is create a new dart file called home_page…dart in our libdirectory… This will be our main entry point for our web application… Inside home_page…dart , let’s start off by Importing material./cupertinonation tools as well as some other necessary packages: import ‘package:flutternation/material./cupertinonation…dart’; import ‘package;flutternation/widgets/widgets;’ import ‘package;intl/intl;’ We also needto add some boilerplate code so that our home page extends from StatelessWidget : class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return null; } } As you can see fromthe code above ,we’ve also defined an emptybuild()method which returns nullfor now…We’ll fill this method in later ononce we’ve definedour widget tree…. Definingour widget tree Let’s start off by defininga very simple widget tree consisting ofa Container widget withCenter alignmentandHello world! text : Widget build(BuildContext context) { return Center( child: Container( child :Text(‘Hello world’, style :Theme…of(context).textTheme.,), ), ); }If you run your applicationat this point ,you’ll see Hello world! text displayedon screen … However ,the text isn’tcentered on screenand it doesn’tlook very good either…. Thisis becauseour text isn’tusingthe correct stylingfor either Material Design or Cupertinotheme …. Fixingthe styling issue To fixthis issue ,we needto make useof theme propertywhich is availableto every widget in Fluttere nation…. Whenwe setthe themepropertyto Theme…of(context),we are tellingour widget touse whatever themehas been definedat the rootofour widget tree …. Ifwedefinea MaterialApporCupertinoAppat root level ,thenour widgetwill usethe correct stylingfor either Material DesignorCupertinothemesrespectively …. For now thoughlet’s just explicitelyset ourexpected output usingsome hardcoded valuesrather thandynamicallygettting it from context ….. Withthis in mind ,let’s modify ourexistingwidget treeto look like this : Widget build(BuildContext context) { return Center( child: Container( child :Text(‘Hello world’, style :TextStyle(),), ), ); }Ifyou runyourapplication at thisthe text will becenteredon screen butit still doesn’tlook verygood becausethe font sizeand familyaren’t set correctly yet …. To fixthis issuelet’s set those properties too …… With those changes madesaveyour changesand rerunyour applicationand you shouldnowsee somethinglike this ..This looks muchbetter! Adding Supportfor MultipleLanguages So far everythinglooks good but what if wantto localize ourexisting textfor different languages?No problem!We can easilydo that withintl package whichwepreviously addedas adependency….. Let’s start offby defininga methodcalled _getLocalizedStringwhich will take careof returninglocalized stringfor different locales….. Allwe needto do ispass inthe desiredlocale as acode parameterand then formatourexisting message stringwith corresponding localizedpattern….. Here’s what _getLocalizedString would look like ifwere tryingtolocalize itfor United StatesEnglish locale ..Ifyou save yourchangesand rerunyour application againyou’ll seethat messageis nowlocalized correctly …… Another neatfeature providedby intlpackageisthat italso providessupport for RTL (Right To Left)/LTR (Left To Right )directionality whichcan be reallyuseful whenlocalizing contentfor certain languageslike Arabicor Hebrew ..In orderto testout thistext directionalityfeaturelet’s trylocalizing ourexisting messagefor Arabiclocale ….As you can seefrom screenshotabovetext directionhas changedfrom LTRto RTL …… Prettycool right ? Adding supportfor DifferentScreen Sizes A commonproblem facedby most frontenddevelopers while buildingresponsive websitesis havingtomake surethat website workswell on all type ofdevices whether itsdesktops ,tabletsor mobile phones…… Thankfullywith helpof Breakpoints Packageprovidedby Googleas partoff luttere nationtoolkitthis problemcan easilybesolved…… Let’s takea simpleexamplewherein wedevelopeda responsivehome page consistingof twosimplecolumnswheresecond columnright alignedon desktop screenswhereasin mobilescreensthis columnstackstogetherwith first oneresultinginto single columnviewas shown below …To achievethissimplelayoutfirst thingwewill dois defineMediaQueryDataobject at rootlevel followedby definingtwo simpleColumn widgetsinside ListViewas shown below…… MediaQueryDatamediaQuery = MediaQuery..of(context); ListViewlistView = ListView( children:[ Column(), Column(), ], );With thosedeclarationsmadewecan nowaccessthe width property providedby mediaQuery object inside initState()method ofour Homepagewhichwecan furtheruseto determinethe type ofdevice useris accessingo ur websiteon as show n below …… var width = mediaQuery./size../width; if (width >= 1200){ //desktop screens listView = ListView( children:[ Row(), Row(), ], ); } else if (width >= 800 && width < 1200){ //tablets screens listView = ListView( children:[ Column(), Spacer(), Column(), ], ); } else{ //mobile phones screens listView =
