Tag: Flutter


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
ubuntuapptree
17 Mar

What’s New In Flutter 2?

by TBSCategories: News

Last year, I wrote two articles here on Smashing Magazine about using Flutter on web and desktop platforms. The first article was a general introduction to web and desktop development, and focused on building responsive UI; the second article was about the challenges you might face when trying to develop a Flutter app that runs on multiple platforms.

Back then, Flutter support for non-mobile platforms wasn’t considered stable and production-ready by the Flutter team, but things have changed now.

Flutter 2 Is Here

On the 3rd of March, Google held the Flutter Engage event, where Fluter 2.0 was launched. This release is really a proper 2.0 release, with many changes promising to make Flutter really ready for going beyond mobile app development.

The change that is central to understanding why Flutter 2.0 matters is that web development is now officially part of the stable channel and desktop support will follow soon on the stable channel as well. In fact, it is currently enabled in release candidate-like form as an early release beta snapshot in the stable channel.

In the announcement, Google didn’t just give a hint of what the future of Flutter will be like. There were also actual examples of how large companies are already working on Flutter apps to replace their existing apps with ones that perform better and allow developers to be more productive. E.g. the world’s biggest car manufacturer, Toyota, will now be building the infotainment system on their cars using Flutter.

Another interesting announcement — this one showing how fast Flutter is improving as a cross-platform SDK — is Canonical’s announcement that, in addition to developing their new Ubuntu installer using Flutter, they will also be using Flutter as their default option to build desktop apps.

They also released a Flutter version of Ubuntu’s Yaru theme, which we will use later in the article to build a Flutter desktop app that looks perfectly at home in the Ubuntu desktop, also using some more of the new Flutter features. You can take a look at Google’s Flutter 2 announcement to get a more complete picture.

Let’s look at some of the technical changes to Flutter which got onto the stable channel with version 2.0 and build a very simple example desktop app with Flutter before we draw some conclusions on what specific project types we could and couldn’t use Flutter for as of now.

General Usability Changes For Bigger Devices

According to the announcement, many changes have been made to Flutter to provide better support for devices that aren’t mobile devices.

For example, an obvious example of something that was needed for web and desktop apps and until now had to be done using third-party packages or by implementing it yourself is a scrollbar.

Now there is a built-in Scrollbar which can fit right into your app, looking exactly how a scrollbar should look in the specific platform: with or without a track, with the possibility of scrolling by clicking on the track, for example, which is huge if you want your users to feel right at home from the start when using your Flutter app. You can also theme it and customize it.

It also looks like at some point Flutter will automatically show suitable scrollbars when the content of the app is scrollable.

Meanwhile, you can just wrap any scrollable view with the scrollbar widget of your choice and create a ScrollController to add as the controller for both the scrollbar and the scrollable widget (in case you’ve never used a ScrollController, you use exactly like a TextEditingController for a TextField). You can see an example of the use of a regular Material scrollbar a bit further down this article in the desktop app example.

Flutter Web Changes

Flutter for the web was already in a quite usable form, but there were performance and usability issues which meant it never felt as polished as mobile Flutter. With the release of Flutter 2.0, there have been many improvements to it, especially when it comes to performance.

The compilation target, previously very experimental and tricky to use to render your app (with WebAssembly and Skia) is now called CanvasKit. It’s been refined to offer a consistent and performant experience when going from running a Flutter app natively on mobile devices to running it in a browser.

Now, by default, your app will render using CanvasKit for desktop web users and with the default HTML renderer (which has had improvements as well, but is not as good as CanvasKit) for mobile web users.

If you’ve tried to use Flutter to build web apps, you might have noticed it wasn’t particularly intuitive to have something as simple as a hyperlink. Now at least, you can create hyperlinks a bit more like you would when using HTML, using the Link class.

This is actually not an addition to Flutter itself, but a recent addition to Google’s url_launcher package. You can find a complete description and examples of usage of the Link class in the official API reference.

Text selection was improved as now the pivot point corresponds to where the user started selecting text and not the left edge of the SelectableText in question. Also, now Copy/Cut/Paste options exist and work properly.

Nevertheless, text selection still isn’t top-notch as it’s not possible to select text across different SelectableText widgets and selectable text still isn’t default, but we will talk about this as well as other outstanding Flutter web drawbacks (lack of SEO support, first and foremost) in the conclusion to this article.

Flutter Desktop Changes

When I wrote about web and desktop development with Flutter last year, I focused mostly on building web apps with Flutter, given that desktop development was still considered very experimental (not even on the beta channel). Now though, Flutter desktop support is soon to follow web support and will be going stable.

Performance and stability have been improved quite a lot, and the improvements in general usability for bigger devices operated with a mouse and keyboard that benefit web apps so much also mean that Flutter desktop apps are now more usable.

There is still a lack of tooling for desktop apps and there are still many quite severe outstanding bugs, so don’t try to use it for your next desktop app project meant for public distribution.

Example Desktop App Built With Flutter

Flutter desktop support is now quite stable and usable though, and it will surely get better in the future just as much as Flutter in its entirety has gotten better until now, so let’s give it a try to see it in action! You can download the entire code example on a GitHub repo.

The app we will build is the following very simple app. We have a sidebar navigation along with some content items for each of the navigation sections.

We are going to restrict the Column on the left (the one showing the controls for the widgets to show on the right side of the app) to a certain width (400 pixels for example) using a Container, whereas the GridView on the right should be Expanded to fill the view.

On the left side of the Row (within the Column), the ListView should expand to fill the vertical space below the Row of buttons at the top. Within the Row at the top, we also need to expand the TextButton (the reset button) to fill the space to the right of the left and right chevron IconButtons.

The resulting HomePageState that does all of that, along with the necessary logic to show the right stuff on the right depending on what the user selects on the left, is the following:

class HomePageState extends State<HomePage> {   int selected = 0;    ScrollController _gridScrollController = ScrollController();    incrementSelected() {     if (selected != widget.dataToShow.length - 1) {       setState(() {         selected++;       });     }   }    decrementSelected() {     if (selected != 0) {       setState(() {         selected--;       });     }   }    @override   Widget build(BuildContext context) {     return Scaffold(       body: Row(         children: [           Container(               color: Colors.black12,               width: 400.0,               child: Column(                 children: [                   Row(                     children: [                       IconButton(                         icon: Icon(Icons.chevron_left),                         onPressed: decrementSelected,                       ),                       IconButton(                         icon: Icon(Icons.chevron_right),                         onPressed: incrementSelected,                       ),                       Expanded(                           child: Center(                         child: TextButton(                           child: Text("Reset"),                           onPressed: () => setState(() => selected = 0),                         ),                       ))                     ],                   ),                   Expanded(                     child: ListView.builder(                       itemCount: widget.dataToShow.length,                       itemBuilder: (_, i) => ListTile(                         title: Text(widget.dataToShow[i].key),                         leading: i == selected                             ? Icon(Icons.check)                             : Icon(Icons.not_interested),                         onTap: () {                           setState(() {                             selected = i;                           });                         },                       ),                     ),                   ),                 ],               )),           Expanded(             child: Scrollbar(               isAlwaysShown: true,               controller: _gridScrollController,               child: GridView.builder(                   controller: gridScrollController,                   itemCount: widget.dataToShow[selected].value.length,                   gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(                       maxCrossAxisExtent: 200.0),                   itemBuilder: (, i) => Container(                         width: 200.0,                         height: 200.0,                         child: Padding(                           padding: const EdgeInsets.all(8.0),                           child: Card(                             child: Center(                                 child:                                     Text(widget.dataToShow[selected].value[i])),                           ),                         ),                       )),             ),           ),         ],       ),     );   } }

and we’re done!

Then you build your app with

flutter build $ {OS_NAME}

where $ {OS_NAME} is the name of your OS, the same you used earlier to enable Flutter desktop development using flutter config.

The compiled binary to run your app will be

build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

on Linux and

buildwindowsrunnerReleaseflutter_ubuntu_desktop_example.exe

on Windows, you can run that and you’ll get the app that I showed you at the start of this section.

On macOS, you need to open macos/Runner.xcworkspace in Xcode and then use Xcode to build and run your app.

Other Flutter Changes

There have also been a few changes that also affect mobile development with Flutter, and here is just a brief selection of some of them.

A feature that so many of us, Flutter developers, wanted is better support for Admob ads, and it’s now finally included in the official google_mobile_ads package. Another one is autocomplete; there is an Autocomplete material widget for it, as well as a more customizable RawAutocomplete widget.

The addition of the Link that we discussed in the section about web development actually applies to all platforms, even though its effects will be felt most by those working on Flutter web projects.

Recent Dart Language Changes

It is important to be aware of the changes that were made to the Dart language that affect Flutter app development.

In particular, Dart 2.12 brought C language interoperability support (described in detail and with instructions for different platforms on the official Flutter website); also, sound null-safety was added to the stable Dart release channel.

null-safety

The biggest change that was made to Dart is the introduction of sound null-safety that it’s getting more and more support from third-party packages as well as the Google-developed libraries and packages.

Null safety brings compiler optimizations and reduces the chance of runtime errors so, even though right now it’s optional to support it, it is important you start at least understanding how to make your app null-safe.

At the moment though, that may not be an option for you as not all Pub packages are fully null-safe and that means that if you need one of those packages for your app you won’t be able to take advantage of the benefits on null-safety.

Making Your App null-safe

If you’ve ever worked with Kotlin, Dart’s approach to null safety will be somewhat familiar to you. Take a look at Dart’s official guide on it for a more complete guide to Dart’s null-safety.

All of the types you’re familiar with (String, int, Object, List, your own classes, etc.) are now non-nullable: their value can never be null.

This means that a function that has a non-nullable return type must always return a value, or else you’ll get a compilation error and you always have to initialize non-nullable variables, unless it’s a local variable that gets assigned a value before it’s ever used.

If you want a variable to be nullable you need to add a question mark to the end of the type name, e.g. when declaring an integer like this:

int? a = 1

At any point, you can set it to null and the compiler won’t cry about it.

Now, what if you have a nullable value and use it for something that requires a non-nullable value? To do that, you can simply check it isn’t null:

void function(int? a) {     if(a != null) {         // a is an int here     } }

If you know with 100% certainty that a variable exists and isn’t null you can just use the ! operator, like this:

String unSafeCode(String? s) => s!;

Drawing Conclusions: What Can We Do With Flutter 2?

As Flutter keeps evolving, there are more and more things we can do with it, but it’s still not reasonable to say that Flutter can be used for any app development project of any kind.

On the mobile side, it’s unlikely you’re going to run into something that Flutter isn’t great at because it’s been supported since the start and it’s been polished. Most things you’ll ever need are already there.

On the other hand, web and desktop aren’t quite there yet.

Desktop is still a bit buggy and Windows apps (which are an important part of desktop development) still require a lot of work before they look good. The situation is better on Linux and macOS only to an extent.

The web is in a much better place than desktop. You can build decent web apps, but you’re still mostly limited to single-page applications and Progressive Web Apps. We still most certainly don’t want to use it for content-centric apps where indexability and SEO are needed.

Content-centric apps probably will not be that great because text selection still isn’t top-notch, as we’ve seen in the section about the current state of Flutter for the web.

If you need the web version of your Flutter app, though, Flutter for the web will probably be just fine, especially as there are a huge amount of web-compatible packages around already and the list is always growing.

Additional Resources

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
08 Jan

Getting Started With The GetX Package In Flutter Applications

by TBSCategories: News

Flutter is one of the fastest ways to build truly cross-platform native applications. It provides features allowing the developer to build a truly beautiful UI experience for their users.

However, most times to achieve things like navigating to screens, state management, and show alerts, a lot of boilerplates are needed. These boilerplates tend to slow down the development efficiency of developers trying to go about building features and meeting their deadlines.

Take for example the boilerplate needed to navigate to a screen in a Flutter application. Let’s say you want to navigate to a screen called AboutScreen. you will have to write:

Navigator.push(     context,     MaterialPageRoute(builder: (context) => AboutScreen()),   );

It would be more efficient and developer-friendly to do something like:

Get.to(AboutScreen());

When you need to navigate back to the previous page in Flutter you will have to write:

Navigator.pop(context);

You will notice we are always depending on context property for something as commonplace as navigating between screens. What if instead, we can do something like this:

Get.back();

The above examples are some of the ways where application development in Flutter can be improved to be more intuitive and efficient with less boilerplate. If you favor simplicity and being efficient in building out features and ideas, in Flutter then the Get package will interest you.

What Is GetX

Get or GetX is a fast, stable, extra-light framework for building Flutter applications.

GetX ships out of the box with high-performance state management, intelligent dependency injection, and route management in a simplistic and practical way.

GetX aims to minimize boilerplates while also providing simple and intuitive syntax for developers to use while building their applications. At the core of GetX are these 3 principles:

  • Performance
    GetX focuses on the performance of your application by implementing its features to consume as little resources as possible.
  • Productivity
    GetX wants developers to use its features to be productive as quickly as possible. It does so by employing easy to remember syntax and practices. For example, generally, the developer should be concerned to remove controllers from memory but GetX out of the box provides smart management that monitors controllers in your application and remove them when they are not being used by default.
  • Organization
    GetX allows the decoupling of the View, presentation logic, business logic, dependency injection, and navigation in your Flutter application. You do not need context to navigate between routes, so you are not dependent on the widget tree for navigation. You don’t need context to access your controllers/blocs through an inheritedWidget, so you can completely decouple your presentation logic and business logic from your view layer. You do not need to inject your Controllers/Models/Blocs classes into your widget tree through multiproviders, for this GetX uses its own dependency injection feature, decoupling the DI from its view completely.

Features Of GetX

GetX comes with a couple of features you will need in your daily app development in Flutter. Let’s look at them:

State Management

One of the flagship features of GetX is its intuitive state management feature. State management in GetX can be achieved with little or no boilerplate.

Route Management

GetX provides API for navigating within the Flutter application. This API is simple and with less code needed.

Dependency Management

GetX provides a smart way to manage dependencies in your Flutter application like the view controllers. GetX will remove any controller not being used at the moment from memory. This was a task you as the developer will have to do manually but GetX does that for you automatically out of the box.

Internationalization

GetX provides i18n out of the box allowing you to write applications with various language support.

Validation

GetX provides validation methods for performing input validation in your Flutter applications. This is quite convenient as you wouldn’t need to install a separate validation package.

Storage

GetX provides a fast, extra light, and synchronous key-value in memory, which backs up data to disk at each operation. It is written entirely in Dart and easily integrates with the core GetX package.

Getting Started With GetX

Now that you have seen what GetX is and the features and benefits it provides, let’s see how to set it up in your application. We will build a demo app to see most of the features we have mentioned in action. Let’s get started.

Create A Brand New Flutter Application

We will get started by creating a brand new Flutter application through the Flutter CLI. I am assuming your machine is already set up for application development with Flutter. So we run:

flutter create getx_demo

This will generate the basic code needed for a Flutter application. Next, open up the project you just created in your editor of choice (We will be using VS Code for this article). We will then run the project to make sure it’s working alright (Make sure you have either a device connected or an emulator/simulator running).

When the application runs, you will see the default counter application that Flutter scaffold for you when you create a new Flutter application. What we are going to do is to implement the very same counter application but with GetX to manage the state of the app (which is the count variable).

We will start with clearing main.dart and leaving only this snippet of code:

# main.dart import 'package:flutter/material.dart';  void main() {   runApp(MyApp()); }  class MyApp extends StatelessWidget {   // This widget is the root of your application.   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Flutter Demo',       theme: ThemeData(         primarySwatch: Colors.blue,         visualDensity: VisualDensity.adaptivePlatformDensity,       ),       home: MyHomePage(title: 'Flutter Demo Home Page'),     );   } }

By now our application would have been broken since there is no MyHomePage widget anymore. Let’s fix that. With GetX, we don’t need stateful widgets and also our UI can be clearly separated from our business logic. So we will create two directories inside lib/. These directories are:

views/ To hold the screens in our application.
controllers/ To hold all controllers for the screens in our application.

Let’s create MyHomePage widget inside views/. The name of the file will be my_home_page.dart. After you create it, add the following code snippet to it:

import 'package:flutter/material.dart';  class MyHomePage extends StatelessWidget {   final String title;    MyHomePage({this.title});   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text(title),       ),       body: Center(         child: Column(           mainAxisAlignment: MainAxisAlignment.center,           children: <Widget>[             Text(               'You have pushed the button this many times:',             ),             Text(               '0',               style: Theme.of(context).textTheme.headline4,             ),           ],         ),       ),       floatingActionButton: FloatingActionButton(         onPressed: null,         tooltip: 'Increment',         child: Icon(Icons.add),       ),     );   } }

Now we have the MyHomePage widget, let’s import it in main.dart. Add the import statement to the top of main.dart below import 'package:flutter/material.dart';

import './views/my_home_page.dart';

Now your main.dart file should look like this:

import 'package:flutter/material.dart'; import './views/my_home_page.dart';  void main() {   runApp(MyApp()); }  class MyApp extends StatelessWidget {   // This widget is the root of your application.   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Flutter Demo',       theme: ThemeData(         primarySwatch: Colors.blue,         visualDensity: VisualDensity.adaptivePlatformDensity,       ),       home: MyHomePage(title: 'Flutter Demo Home Page'),     );   } }

When you save your application now, all errors should have been fixed and the app will run. But you will notice when you click the button again, the counter won’t be updated. If you look at the views/my_home_page.dart code, you will see we are just hard coding 0 as the value of the Text widget and passing null to the onPressed handler of the button. Let’s bring in GetX to the mix to get the application functional again.

Installing GetX

Head over to the install page for GetX on pub.dev and you will see the line of code to copy to place in your pubspec.yml file to install GetX. As of the time of writing this article, the current version of GetX is 3.23.1. So we will copy the line:

get: ^3.23.1

And then paste it under the dependencies section of our pubspec.yml file. When you save the file, get should be automatically installed for you. Or you can run manually in your terminal.

flutter pub get

The dependencies section of your pubspec.yml file should look like this:

dependencies:   flutter:     sdk: flutter   get: ^3.23.1

GetxController

We have mentioned that GetX allows you to separate the UI of your application from the logic. It does this by providing a GetxController class which you can inherit to create controller classes for the views of your application. For our current app, we have one view so we will create a controller for that view. Head over to the controllers/ directory and create a file called my_home_page_controller.dart. This will hold the controller for the MyHomePage view.

After you’ve created the file, first import the GetX package by adding this to the top of the file:

import 'package:get/get.dart';

Then you will create a class called MyHomePageController inside it and extend the GetxController class. This is how the file should look like:

import 'package:get/get.dart';  class MyHomePageController extends GetxController {}

let’s add the count state to the class we’ve created.

final count = 0;

In GetX, to make a variable observable — this means that when it changes, other parts of our application depending on it will be notified. To do this we simply need to add .obs to the variable initialization. So for our above count variable, we will add .obs to 0. So the above declaration will now look like this:

final count = 0.obs;

This is how our controller file looks like at the moment:

import 'package:get/get.dart';  class MyHomePageController extends GetxController {   final count = 0.obs; }

To wrap things up with the MyHomePageController we will implement the increment method. This is the snippet to do that:

increment() => count.value++;

You will notice we needed to add .value to the count variable to increment it. We did this because adding .obs to a variable makes it an observable variable and to get the value of an observable variable, you do so from the value property.

So we are done with the controller. Now when the value of count changes, any part of our application using it will be updated automatically.

We will now head over to our view and let it know about the controller we just created. We will do so by instantiating the controller class using GetX dependency management feature. This will ensure that our controller won’t be in memory when it is no longer needed.

In views/my_home_page.dart import the Get package and also the controller you created like so:

import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';

Then inside the MyHomePage class we will instantiate the MyHomePageController:

final MyHomePageController controller = Get.put(MyHomePageController());

Now we have an instance of the MyHomePageController, we can use the state variable as well as the method. So starting with the state, in GetX to mark a part of your UI to be rebuilt when a state variable changes, you will wrap that part with the Obx widget. GetX provides other ways of doing this, but this method is much simpler and cleaner.

For our count application we want the Text widget to be updated with the current count. So we will wrap the Text widget with Obx widget like so:

Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),)

Next, we will replace the static string 0 with the count variable from the MyHomePageController like so:

Obx(() => Text('$  {controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),)

Lastly, we will call the increment method when the floatingActionButton is pressed like so:

floatingActionButton: FloatingActionButton(         onPressed: controller.increment,         tooltip: 'Increment',         child: Icon(Icons.add),       ),

So overall, our MyHomePage view file should now look like this:

import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';  class MyHomePage extends StatelessWidget {   final String title;   final MyHomePageController controller = Get.put(MyHomePageController());   MyHomePage({this.title});   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text(title),       ),       body: Center(         child: Column(           mainAxisAlignment: MainAxisAlignment.center,           children: <Widget>[             Text(               'You have pushed the button this many times:',             ),             Obx(               () => Text(                 '$  {controller.count.value}',                 style: Theme.of(context).textTheme.headline4,               ),             )           ],         ),       ),       floatingActionButton: FloatingActionButton(         onPressed: controller.increment,         tooltip: 'Increment',         child: Icon(Icons.add),       ),     );   } }

When you save your application or you rerun it, the counter app should be working as it did when we first created the application.

I believe you have seen how intuitive state management is with GetX, we didn’t have to write a lot of boilerplate and this simplicity will be more obvious as your application get complex. You will also notice our view doesn’t hold or maintain any state so it can be a stateless widget. The brain of the view in turn is now a controller class that will hold the state for the view and methods.

Navigation In GetX

We have seen state management in GetX. Let’s now look at how GetX supports Navigation within your application. To activate the Navigation feature of GetX, you only need to make one change in main.dart which is to turn the MaterialApp widget to a GetMaterialApp widget. Let’s do that by first importing Get in the top of main.dart

import 'package:get/get.dart';

Then we make the change to MaterialApp so our main.dart file now look like this:

import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart';  void main() {   runApp(MyApp()); }  class MyApp extends StatelessWidget {   // This widget is the root of your application.   @override   Widget build(BuildContext context) {     return GetMaterialApp(       title: 'Flutter Demo',       theme: ThemeData(         primarySwatch: Colors.blue,         visualDensity: VisualDensity.adaptivePlatformDensity,       ),       home: MyHomePage(title: 'Flutter Demo Home Page'),     );   } }

Now our app has been set up to support GetX navigation. To test this out we will create another view in views/ directory. We will call this on about_page.dart and it will contain the following code:

import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';  class AboutPage extends StatelessWidget {   final MyHomePageController controller = Get.put(MyHomePageController());   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text('About GetX'),       ),       body: Center(         child: Column(           mainAxisAlignment: MainAxisAlignment.center,           children: <Widget>[             Padding(               padding: const EdgeInsets.all(16.0),               child: Text(                 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.',               ),             ),           ],         ),       ),     );   } }

We will then go over to MyHomePage and add a button that when pressed will navigate us to the AboutPage. Like so. The button should be below the Obx widget. Here it is:

 FlatButton(onPressed: () {}, child: Text('About GetX'))

We will also need to import the AboutPage on top of the MyHomePage file:

import './about_page.dart';

To tell GetX to navigate to the AboutPage all we need is one line of code which is:

Get.to(AboutPage());

Let’s add that to the onPressed callback of the FlatButton widget like so:

 FlatButton(      onPressed: () {        Get.to(AboutPage());               },   child: Text('About GetX'))

When you save your application now, you will now be able to navigate to the AboutPage.

You can also choose to replace the MyHomePage view with the AboutPage so the user won’t be able to navigate back to the previous page by hitting the device back button. This is useful for screens like login screens. To do this, replace the content of the onPressed handler with the below code:

  Get.off(AboutPage());

This will pop the MyHomePage view and replace it with AboutPage.

Now that we can navigate to the AboutPage, I think it won’t be so bad to be able to go back to MyHomePage to do this we will add a button in AboutPage after the Padding widget and in it’s onPressed handler we will make a call to Get.back() to navigate back to the MyHomePage:

 FlatButton(     onPressed: () {         Get.back();     },     child: Text('Go Home') )

Snackbar

In Flutter conventionally to show a Snackbar, you will need to write something like this:

final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar);

You can observe we are still depending on the context property. Let’s see how we can achieve this in GetX. Go into the MyHomePage view and add another FlatButton widget below the last button we added. Here is the snippet for the button:

 FlatButton(       onPressed: () {          // TODO: Implement Snackbar        },       child: Text('Show Snackbar'))

Let’s display the message ‘Yay! Awesome GetX Snackbar’. Inside the onPressed handler function add the below line of code:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

Run your application and when you click on the “Show Snackbar button” you will see a snackbar on top of your application!

See how we reduced the number of lines needed to show a snackbar in a Flutter application? Let’s do some more customization on the Snackbar; Let’s make it appear at the bottom of the app. Change the code to this:

Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, );

Save and run your application and the Snackbar will now appear at the bottom of the application. How about we change the background color of the Snackbar as it is at the moment transparent. We will change it to an amberAccent color from the Colors class in Flutter. Update the code to this:

Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );

Overall, the button code should look like this:

 FlatButton(                 onPressed: () {                   Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',                       snackPosition: SnackPosition.BOTTOM,                       backgroundColor: Colors.amberAccent);                 },                 child: Text('Show Snackbar'))

Dialog

GetX provides a simple method for creating AlertDialog in Flutter. Let’s see it in action. Create another button below the previous one:

 FlatButton(                 onPressed: () {                  // TODO: Show alert dialog                 },                 child: Text('Show AlertDialog'))

Let’s call GetX to display an alert Dialog:

Get.defaultDialog();

That will show a default Alert Dialog that is dismissable by tapping outside the Dialog. You can see how in one line of code we have a working alert dialog. Let’s customize it a bit. Let’s change the title and the message:

 Get.defaultDialog(                       title: 'GetX Alert', middleText: 'Simple GetX alert');

Save and run your app and you will see the changes when you hit the “Show AlertDialog” button. We can add confirm and Cancel buttons like so:

Get.defaultDialog(                       title: 'GetX Alert',                       middleText: 'Simple GetX alert',                       textConfirm: 'Okay',                       confirmTextColor: Colors.amberAccent,                       textCancel: 'Cancel');

There are a lot of ways to customize the GetX dialog and the API is quite intuitive and simple.

Conclusion

GetX was created to improve the productivity of Flutter developers as they build out features. Instead of having to search for boilerplate needed to do things like state management, navigation management, and more, GetX provides a simple intuitive API to achieve these activities without sacrificing performance. This article introduces you to GetX and how to get started using it in your Flutter applications.

Articles on Smashing Magazine — For Web Designers And Developers

logo-red-16
18 Jun

Solving Common Cross-Platform Issues When Working With Flutter

by TBSCategories: News

Solving Common Cross-Platform Issues When Working With Flutter

Solving Common Cross-Platform Issues When Working With Flutter

Carmine Zaccagnino

I’ve seen a lot of confusion online regarding Web development with Flutter and, often, it’s sadly for the wrong reasons.

Specifically, people sometimes confuse it with the older Web-based mobile (and desktop) cross-platform frameworks, which basically were just Web pages running within browsers running within a wrapper app.

That was truly cross-platform in the sense that the interfaces were the same anyway because you only had access to the interfaces normally accessible on the Web.

Flutter isn’t that, though: it runs natively on each platform, and it means each app runs just like it would run if it were written in Java/Kotlin or Objective-C/Swift on Android and iOS, pretty much. You need to know that because this implies that you need to take care of the many differences between these very diverse platforms.

In this article, we’re going to see some of those differences and how to overcome them. More specifically, we’re going to talk about storage and UI differences, which are the ones that most often cause confusion to developers when writing Flutter code that they want to be cross-platform.

Example 1: Storage

I recently wrote on my blog about the need for a different approach to storing JWTs in Web apps when compared to mobile apps.

That is because of the different nature of the platforms’ storage options, and the need to know each and their native development tools.

Web

When you write a Web app, the storage options you have are:

  1. downloading/uploading files to/from disk, which requires user interaction and is therefore only suitable for files meant to be read or created by the user;
  2. using cookies, which may or may not be accessible from JS (depending on whether or not they’re httpOnly) and are automatically sent along with requests to a given domain and saved when they come as part of a response;
  3. using JS localStorage and sessionStorage, accessible by any JS on the website, but only from JS that is part of the pages of that website.

Mobile

The situation when it comes to mobile apps is completely different. The storage options are the following:

  1. local app documents or cache storage, accessible by that app;
  2. other local storage paths for user-created/readable files;
  3. NSUserDefaults and SharedPreferences respectively on iOS and Android for key-value storage;
  4. Keychain on iOS and KeyStore on Android for secure storage of, respectively, any data and cryptographic keys.

If you don’t know that, you’re going to make a mess of your implementations because you need to know what storage solution you’re actually using and what the advantages and drawbacks are.

Cross-Platform Solutions: An Initial Approach

Using the Flutter shared_preferences package uses localStorage on the Web, SharedPreferences on Android and NSUserDefaults on iOS. Those have completely different implications for your app, especially if you’re storing sensitive information like session tokens: localStorage can be read by the client, so it’s a problem if you’re vulnerable to XSS. Even though mobile apps aren’t really vulnerable to XSS, SharedPreferences and NSUserDefaults are not secure storage methods because they can be compromised on the client side since they are not secure storage and not encrypted. That’s because they are meant for user preferences, as mentioned here in the case of iOS and here in the Android documentation when talking about the Security library which is designed to provide wrappers to the SharedPreferences specifically to encrypt the data before storing it.

Secure Storage On Mobile

The only secure storage solutions on mobile are Keychain and KeyStore on iOS and Android respectively, whereas there is no secure storage on the Web.

The Keychain and KeyStore are very different in nature, though: Keychain is a generic credentials storage solution, whereas the KeyStore is used to store (and can generate) cryptographic keys, either symmetric keys or public/private keys.

This means that if, for instance, you need to store a session token, on iOS you can let the OS manage the encryption part and just send your token to the Keychain, whereas on Android it’s a bit more of a manual experience because you need to generate (not hard-code, that’s bad) a key, use it to encrypt the token, store the encrypted token in SharedPreferences and store the key in the KeyStore.

There are different approaches to that, as are most things in security, but the simplest is probably to use symmetric encryption, as there is no need for public key cryptography since your app both encrypts and decrypts the token.

Obviously, you don’t need to write mobile platform-specific code that does all of that, as there is a Flutter plugin that does all of that, for instance.

The Lack Of Secure Storage On the Web

That was, actually, the reason that compelled me to write this post. I wrote about using that package to store JWT on mobile apps and people wanted the Web version of that but, as I said, there is no secure storage on the Web. It doesn’t exist.

Does that mean your JWT has to be out in the open?

No, not at all. You can use httpOnly cookies, can’t you? Those aren’t accessible by JS and are sent only to your server. The issue with that is that they’re always sent to your server, even if one of your users clicks on a GET request URL on someone else’s website and that GET request has side effects you or your user won’t like. This actually works for other request types as well, it’s just more complicated. It’s called Cross-Site Request Forgery and you don’t want that. It’s among the web security threats mentioned in Mozilla’s MDN docs, where you can find a more complete explanation.

There are prevention methods. The most common one is having two tokens, actually: one of them getting to the client as an httpOnly cookie, the other as part of the response. The latter has to be stored in localStorage and not in cookies because we don’t want it to be sent automatically to the server.

Solving Both

What if you have both a mobile app and a Web app?

That can be dealt with in one of two ways:

  1. Use the same backend endpoint, but manually get and send the cookies using the cookie-related HTTP headers;
  2. Create a separate non-Web backend endpoint that generates different token than either token used by the Web app and then allow for regular JWT authorization if the client is able to provide the mobile-only token.

Running Different Code On Different Platforms

Now, let’s see how we can run different code on different platforms in order to be able to compensate for the differences.

Creating A Flutter Plugin

Especially to solve the problem of storage, one way you can do that is with a plugin package: plugins provide a common Dart interface and can run different code on different platforms, including native platform-specific Kotlin/Java or Swift/Objective-C code. Developing packages and plugins is rather complex, but it’s explained in many places on the Web and elsewhere (for example in Flutter books), including the official Flutter documentation.

For mobile platforms, for instance, there already is a secure storage plugin, and that’s flutter_secure_storage, for which you can find an example of usage here, but that doesn’t work on the Web, for example.

On the other hand, for simple key-value storage that also works on the web, there’s a cross-platform Google-developed first-party plugin package called shared_preferences, which has a Web-specific component called shared_preferences_web which uses NSUserDefaults, SharedPreferences or localStorage depending on the platform.

TargetPlatform on Flutter

After importing package:flutter/foundation.dart, you can compare Theme.of(context).platform to the values:

  • TargetPlatform.android
  • TargetPlatform.iOS
  • TargetPlatform.linux
  • TargetPlatform.windows
  • TargetPlatform.macOS
  • TargetPlatform.fuchsia

and write your functions so that, for each platform you want to support, they do the appropriate thing. This will come especially useful for the next example of platform difference, and that is differences in how widgets are displayed on different platforms.

For that use case, in particular, there is also a reasonably popular flutter_platform_widgets plugin, which simplifies the development of platform-aware widgets.

Example 2: Differences In How The Same Widget Is Displayed

You can’t just write cross-platform code and pretend a browser, a phone, a computer, and a smartwatch are the same thing — unless you want your Android and iOS app to be a WebView and your desktop app to be built with Electron. There are plenty of reasons not to do that, and it’s not the point of this piece to convince you to use frameworks like Flutter instead that keep your app native, with all the performance and user experience advantages that come with it, while allowing you to write code that is going to be the same for all platforms most of the time.

That requires care and attention, though, and at least a basic knowledge of the platforms you want to support, their actual native APIs, and all of that. React Native users need to pay even more attention to that because that framework uses the built-in OS widgets, so you actually need to pay even more attention to how the app looks by testing it extensively on both platforms, without being able to switch between iOS and Material widget on the fly like it’s possible with Flutter.

What Changes Without Your Request

There are some aspects of the UI of your app that are automatically changed when you switch platforms. This section also mentions what changes between Flutter and React Native in this respect.

Between Android And iOS (Flutter)

Flutter is capable of rendering Material widgets on iOS (and Cupertino (iOS-like) widgets on Android), but what it DOESN’T do is show exactly the same thing on Android and iOS: Material theming especially adapts to the conventions of each platform.

For instance, navigation animations and transitions and default fonts are different, but those don’t impact your app that much.

What may affect some of your choices when it comes to aesthetics or UX is the fact that some static elements also change. Specifically, some icons change between the two platforms, app bar titles are in the middle on iOS and on the left on Android (on the left of the available space in case there is a back button or the button to open a Drawer (explained here in the Material Design guidelines and also known as a hamburger menu). Here’s what a Material app with a Drawer looks like on Android:

image of an Android app showing where the app bar title appears on Flutter Android Material apps
Material app running on Android: the AppBar title is in the left side of the available space. (Large preview)

And what the same, very simple, Material app looks like on iOS:

image of an iOS app showing where the app bar title appears on Flutter iOS Material apps
Material app running on iOS: the AppBar title is in the middle. (Large preview)
Between Mobile and Web and With Screen Notches (Flutter)

On the Web there is a bit of a different situation, as mentioned also in this Smashing article about Responsive Web Development with Flutter: in particular, in addition to having to optimize for bigger screens and account for the way people expect to navigate through your site — which is the main focus of that article — you have to worry about the fact that sometimes widgets are placed outside of the browser window. Also, some phones have notches in the top part of their screen or other impediments to the correct viewing of your app because of some sort of obstruction.

Both of these problems can be avoided by wrapping your widgets in a SafeArea widget, which is a particular kind of padding widget which makes sure your widgets fall into a place where they can actually be displayed without anything impeding the users’ ability to see them, be it a hardware or software constraint.

In React Native

React Native requires much more attention and a much deeper knowledge of each platform, in addition to requiring you to run the iOS Simulator as well as the Android Emulator at the very least in order to be able to test your app on both platforms: it’s not the same and it converts its JavaScript UI elements to platform-specific widgets. In other words, your React Native apps will always look like iOS — with Cupertino UI elements as they are sometimes called — and your Android apps will always look like regular Material Design Android apps because it’s using the platform’s widgets.

The difference here is that Flutter renders its widgets with its own low-level rendering engine, which means you can test both app versions on one platform.

Getting Around That Issue

Unless you’re going for something very specific, your app is supposed to look different on different platforms otherwise some of your users will be unhappy.

Just like you shouldn’t simply ship a mobile app to the web (as I wrote in the aforementioned Smashing post), you shouldn’t ship an app full of Cupertino widgets to Android users, for example, because it’s going to be confusing for the most part. On the other hand, having the chance to actually run an app that has widgets that are meant for another platform allows you to test the app and show it to people in both versions without having to use two devices for that necessarily.

The Other Side: Using The Wrong Widgets For The Right Reasons

But that also means that you can do most of your Flutter development on a Linux or Windows workstation without sacrificing the experience of your iOS users, and then just build the app for the other platform and not have to worry about thoroughly testing it.

Next Steps

Cross-platform frameworks are awesome, but they shift responsibility to you, the developer, to understand how each platform works and how to make sure your app adapts and is pleasant to use for your users. Other small things to consider may be, for example, using different descriptions for what might be in essence the same thing if there are different conventions on different platforms.

It’s great to not have to build the two (or more) apps separately using different languages, but you still need to keep in mind you are, in essence, building more than one app and that requires thinking about each of the apps you are building.

Further Resources

Smashing Editorial (ra, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
03-responsive-web-desktop-development-with-flutter-opt
22 Apr

Responsive Web And Desktop Development With Flutter

by TBSCategories: News

Responsive Web And Desktop Development With Flutter

Responsive Web And Desktop Development With Flutter

Carmine Zaccagnino

This tutorial is not an introduction to Flutter itself. There are plenty of articles, videos and several books available online with simple introductions that will help you learn the basics of Flutter. Instead, we’ll be covering the following two objectives:

  1. The current state of Flutter non-mobile development and how you can run Flutter code in the browser, on a desktop or laptop computer;
  2. How to create responsive apps using Flutter, so that you can see its power — especially as a web framework — on full display, ending with a note about routing based on URL.

Let’s get into it!

What Is Flutter, Why It’s Important, What It Has Evolved Into, Where It’s Going

Flutter is Google’s latest app development framework. Google envisions it to be all-encompassing: It will enable the same code to be executed on smartphones of all brands, on tablets, and on desktop and laptops computer as native apps or as web pages.

It’s a very ambitious project, but Google has been incredibly successful until now particularly in two aspects: in creating a truly platform-independent framework for Android and iOS native apps that works great and is fully ready for production use, and in creating an impressive front-end web framework that can share 100% of the code with a compatible Flutter app.

In the next section, we’re going to see what makes the app compatible and what’s the state of non-mobile Flutter development as of now.

Non-Mobile Development With Flutter

Non-mobile development with Flutter was first publicized in a significant way at Google I/O 2019. This section is about how to make it work and about when it works.

How To Enable Web And Desktop Development

To enable web development, you must first be on Flutter’s beta channel. There are two ways to get to that point:

  • Install Flutter directly on the beta channel by downloading the appropriate latest beta version from the SDK archive.
  • If you already have Flutter installed, switch to the beta channel with $ flutter channel beta, and then perform the switch itself by updating your Flutter version (which is actually a git pull on the Flutter installation folder) with $ flutter upgrade.

After that, you can run this:

$  flutter config --enable-web

Desktop support is much more experimental, especially due to a lack of tooling for Linux and Windows, making plugin development especially a major pain, and due to the fact that the APIs used for it are intended for proof-of-concept use and not for production. This is unlike web development, which is using the tried-and-tested dart2js compiler for release builds, which are not even supported for Windows and Linux native desktop apps.

Note: Support for macOS is slightly better than support for Windows and Linux, but it still isn’t as good as support for the web and not nearly as good as the full support for mobile platforms.

To enable support for desktop development, you need to switch to the master release channel by following the same steps outlined earlier for the beta channel. Then, run the following by replacing <OS_NAME> with either linux, windows, or macos:

$  flutter config --enable-<OS_NAME>-desktop

At this point, if you have issues with any of the following steps that I’ll be describing because the Flutter tool isn’t doing what I’m saying it should do, some common troubleshooting steps are these:

  • Run flutter doctor to check for issues. A side effect of this Flutter command is that it should download any tools it needs that it doesn’t have.
  • Run flutter upgrade.
  • Turn it off and on again. The old tier-1 technical-support answer of restarting your computer might be just what is needed for you to be able to enjoy the full riches of Flutter.

Running And Building Flutter Web Apps

Flutter web support isn’t bad at all, and this is reflected in the ease of development for the web.

Running this…

$  flutter devices

… should show right away an entry for something like this:

Web Server • web-server • web-javascript • Flutter Tools

Additionally, running the Chrome browser should cause Flutter to show an entry for it as well. Running flutter run on a compatible Flutter project (more on that later) when the only “connected device” showing up is the web server will cause Flutter to start a web server on localhost:<RANDOM_PORT>, which will allow you to access your Flutter web app from any browser.

If you have installed Chrome but it’s not showing up, you need to set the CHROME_EXECUTABLE environment variable to the path to the Chrome executable file.

Running And Building Flutter Desktop Apps

After you’ve enabled Flutter desktop support, you can run a Flutter app natively on your development workstation with flutter run -d <OS_NAME>, replacing <OS_NAME> with the same value you used when enabling desktop support. You can also build binaries in the build directory with flutter build <OS_NAME>.

Before you can do any of that, though, you need to have a directory containing what Flutter needs to build for your platform. This will be created automatically when you create a new project, but you’ll need to create it for an existing project with flutter create .. Also, the Linux and Windows APIs are unstable, so you might have to regenerate them for those platforms if the app stops working after a Flutter update.

When Is An App Compatible?

What have I meant all along when mentioning that a Flutter app has to be a “compatible project” in order for it to work on desktop or the web? Put simply, I mean that it mustn’t use any plugin that doesn’t have a platform-specific implementation for the platform on which you’re trying to build.

To make this point absolutely clear to everyone and avoid misunderstanding, please note that a Flutter plugin is a particular Flutter package that contains platform-specific code that is necessary for it to provide its features.

For example, you can use the Google-developed url_launcher package as much as you want (and you might want to, given that the web is built on hyperlinks).

An example of a Google-developed package the usage of which would preclude web development is path_provider, which is used to get the local storage path to save files to. This is an example of a package that, incidentally, isn’t of any use to a web app, so not being able to use it isn’t really a bummer, except for the fact that you need to change your code in order for it to work on the web if you’re using it.

For example, you can use the shared_preferences package, which relies on HTML localStorage on the web.

Similar caveats are valid regarding desktop platforms: Very few plugins are compatible with desktop platforms, and, as this is a recurring theme, much more work on this needs to be done on the desktop side than is really necessary on Flutter for the web.

Creating Responsive Layouts In Flutter

Because of what I’ve described above and for simplicity, I’m going to assume for the rest of this post that your target platform is the web, but the basic concepts apply to desktop development as well.

Supporting the web has benefits and responsibilities. Being pretty much forced to support different screen sizes might sound like a drawback, but consider that running the app in the web browsers enables you to see very easily how your app will look on screens of different sizes and aspect ratios, without having to run separate mobile device emulators.

Now, let’s talk code. How can you make your app responsive?

There are two perspectives from which this analysis is done:

  1. “What widgets am I using or can I use that can or should adapt to screens of different sizes?”
  2. “How can I get information about the size of the screen, and how can I use it when writing UI code?”

We’ll answer the first question later. Let’s first talk about the latter, because it can be dealt with very easily and is at the heart of the issue. There are two ways to do this:

  1. One way is to take the information from the MediaQueryData of the MediaQuery root InheritedWidget, which has to exist in the widget tree in order for a Flutter app to work (it’s part of MaterialApp/WidgetsApp/CupertinoApp), which you can get, just like any other InheritedWidget, with MediaQuery.of(context), which has a size property, which is of type Size, and which therefore has two width and height properties of the type double.
  2. The other way is to use a LayoutBuilder, which is a builder widget (just like a StreamBuilder or a FutureBuilder) that passes to the builder function (along with the context) a BoxConstraints object that has minHeight, maxHeight, minWidth and maxWidth properties.

Here’s an example DartPad using the MediaQuery to get constraints, the code for which is the following:

import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(context) =>     MaterialApp(       home: MyHomePage()     ); }  class MyHomePage extends StatelessWidget {   @override   Widget build(context) =>     Scaffold(       body: Center(         child: Column(           mainAxisAlignment: MainAxisAlignment.spaceEvenly,           children: [             Text(               "Width: $ {MediaQuery.of(context).size.width}",               style: Theme.of(context).textTheme.headline4             ),             Text(               "Height: $ {MediaQuery.of(context).size.height}",               style: Theme.of(context).textTheme.headline4             )           ]        )      )    ); }

And here’s one using the LayoutBuilder for the same thing:

import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(context) =>     MaterialApp(       home: MyHomePage()     ); }  class MyHomePage extends StatelessWidget {   @override   Widget build(context) =>     Scaffold(       body: LayoutBuilder(         builder: (context, constraints) => Center(           child: Column(             mainAxisAlignment: MainAxisAlignment.spaceEvenly,             children: [               Text(                 "Width: $ {constraints.maxWidth}",                 style: Theme.of(context).textTheme.headline4               ),               Text(                 "Height: $ {constraints.maxHeight}",                 style: Theme.of(context).textTheme.headline4               )             ]          )        )      )   ); }

Now, let’s think about what widgets can adapt to the constraints.

Fist of all, let’s think about the different ways of laying out multiple widgets according to the size of the screen.

The widget that most easily adapts is the GridView. In fact, a GridView built using the GridView.extent constructor doesn’t even need your involvement to be made responsive, as you can see in this very simple example:

import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(context) =>     MaterialApp(       home: MyHomePage()     ); }  class MyHomePage extends StatelessWidget {   final List elements = [     "Zero",     "One",     "Two",     "Three",     "Four",     "Five",     "Six",     "Seven",     "Eight",     "A Million Billion Trillion",     "A much, much longer text that will still fit"   ];     @override   Widget build(context) =>     Scaffold(       body: GridView.extent(         maxCrossAxisExtent: 130.0,         crossAxisSpacing: 20.0,         mainAxisSpacing: 20.0,         children: elements.map((el) => Card(child: Center(child: Padding(padding: EdgeInsets.all(8.0), child: Text(el))))).toList()       )    ); }

You can accommodate content of different sizes by changing the maxCrossAxisExtent.

That example mostly served the purpose of showing the existence of the GridView.extent GridView constructor, but a much smarter way to do that would be to use a GridView.builder with a SliverGridDelegateWithMaxCrossAxisExtent, in this case where the widgets to be shown in the grid are dynamically created from another data structure, as you can see in this example:

import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(context) =>     MaterialApp(       home: MyHomePage()     ); }  class MyHomePage extends StatelessWidget {   final List<String> elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"];     @override   Widget build(context) =>     Scaffold(       body: GridView.builder(         itemCount: elements.length,         gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(           maxCrossAxisExtent: 130.0,           crossAxisSpacing: 20.0,           mainAxisSpacing: 20.0,         ),         itemBuilder: (context, i) => Card(           child: Center(             child: Padding(               padding: EdgeInsets.all(8.0), child: Text(elements[i])             )           )         )       )    ); }

An example of GridView adapting to different screens is my personal landing page, which is a very simple Flutter web app consisting of a GridView with a bunch of Cards, just like that previous example code, except that the Cards are a little more complex and larger.

A very simple change that could be made to apps designed for phones would be to replace a Drawer with a permanent menu on the left when there is space.

For example, we could have a ListView of widgets, like the following, which is used for navigation:

class Menu extends StatelessWidget {   @override   Widget build(context) => ListView(     children: [       FlatButton(         onPressed: () {},           child: ListTile(           leading: Icon(Icons.looks_one),           title: Text("First Link"),         )       ),       FlatButton(         onPressed: () {},           child: ListTile(           leading: Icon(Icons.looks_two),           title: Text("Second Link"),         )       )     ]   ); }

On a smartphone, a common place to use that would be inside a Drawer (also known as a hamburger menu).

Alternatives to that would be the BottomNavigationBar or the TabBar, in combination with the TabBarView, but with both we’d have to make more changes than are required with the drawer, so we’ll stick with the drawer.

To only show the Drawer containing the Menu that we saw earlier on smaller screens, you’d write code that looks like the following snippet, checking the width using the MediaQuery.of(context) and passing a Drawer object to the Scaffold only if it’s less than some width value that we believe to be appropriate for our app:

Scaffold(     appBar: AppBar(/* ... */),     drawer: MediaQuery.of(context).size.width < 500 ?     Drawer(       child: Menu(),     ) :     null,     body: /* ... */ )

Now, let’s think about the body of the Scaffold. As the sample main content of our app, we’ll use the GridView that we built previously, which we keep in a separate widget named Content to avoid confusion:

class Content extends StatelessWidget {   final List elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"];   @override   Widget build(context) => GridView.builder(     itemCount: elements.length,     gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(       maxCrossAxisExtent: 130.0,       crossAxisSpacing: 20.0,       mainAxisSpacing: 20.0,     ),     itemBuilder: (context, i) => Card(       child: Center(         child: Padding(           padding: EdgeInsets.all(8.0), child: Text(elements[i])         )       )     )   ); }

On bigger screens, the body itself may be a Row that shows two widgets: the Menu, which is restricted to a fixed width, and the Content filling the rest of the screen.

On smaller screens, the entire body would be the Content.

We’ll wrap everything in a SafeArea and a Center widget because sometimes Flutter web app widgets, especially when using Rows and Columns, end up outside of the visible screen area, and that is fixed with SafeArea and/or Center.

This means the body of the Scaffold will be the following:

SafeArea(   child:Center(     child: MediaQuery.of(context).size.width < 500 ? Content() :     Row(       children: [         Container(           width: 200.0,           child: Menu()         ),         Container(           width: MediaQuery.of(context).size.width-200.0,           child: Content()         )       ]     )   ) )

Here is all of that put together:

(Large preview)
import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(context) => MaterialApp(     home: HomePage()   ); }   class HomePage extends StatelessWidget {   @override   Widget build(context) => Scaffold(     appBar: AppBar(title: Text("test")),     drawer: MediaQuery.of(context).size.width < 500 ? Drawer(       child: Menu(),     ) : null,     body: SafeArea(         child:Center(           child: MediaQuery.of(context).size.width < 500 ? Content() :           Row(             children: [               Container(                 width: 200.0,                 child: Menu()               ),               Container(                 width: MediaQuery.of(context).size.width-200.0,                 child: Content()               )             ]           )         )     )   ); }  class Menu extends StatelessWidget {   @override   Widget build(context) => ListView(     children: [       FlatButton(         onPressed: () {},           child: ListTile(           leading: Icon(Icons.looks_one),           title: Text("First Link"),         )       ),       FlatButton(         onPressed: () {},           child: ListTile(           leading: Icon(Icons.looks_two),           title: Text("Second Link"),         )       )     ]   ); }  class Content extends StatelessWidget {   final List<String> elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"];   @override   Widget build(context) => GridView.builder(     itemCount: elements.length,     gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(       maxCrossAxisExtent: 130.0,       crossAxisSpacing: 20.0,       mainAxisSpacing: 20.0,     ),     itemBuilder: (context, i) => Card(       child: Center(         child: Padding(           padding: EdgeInsets.all(8.0), child: Text(elements[i])         )       )     )   ); }

This is most of the stuff you’ll need as a general introduction to responsive UI in Flutter. Much of its application will depend on your app’s specific UI, and it’s hard to pinpoint exactly what you can do to make your app responsive, and you can take many approaches depending on your preference. Now, though, let’s see how we can make a more complete example into a responsive app, thinking about common app elements and UI flows.

Putting It In Context: Making An App Responsive

So far, we have just a screen. Let’s expand that into a two-screen app with working URL-based navigation!

Creating A Responsive Login Page

Chances are that your app has a login page. How can we make that responsive?

Login screens on mobile devices are quite similar to each other usually. The space available isn’t much; it’s usually just a Column with some Padding around its widgets, and it contains TextFields for typing in a username and a password and a button to log in. So, a pretty standard (though not functioning, as that would require, among other things, a TextEditingController for each TextField) login page for a mobile app could be the following:

Scaffold(   body: Container(     padding: const EdgeInsets.symmetric(       vertical: 30.0, horizontal: 25.0     ),     child: Column(       mainAxisAlignment: MainAxisAlignment.spaceAround,       children: [         Text("Welcome to the app, please log in"),         TextField(           decoration: InputDecoration(             labelText: "username"           )         ),         TextField(           obscureText: true,           decoration: InputDecoration(             labelText: "password"           )         ),         RaisedButton(           color: Colors.blue,           child: Text("Log in", style: TextStyle(color: Colors.white)),           onPressed: () {}         )       ]     ),   ), )

It looks fine on a mobile device, but those very wide TextFields start to look jarring on a tablet, let alone a bigger screen. However, we can’t just decide on a fixed width because phones have different screen sizes, and we should maintain a degree of flexibility.

For example, through experimentation, we might find that the maximum width should be 500. Well, we would set the Container’s constraints to 500 (I used a Container instead of Padding in the previous example because I knew where I was going with this) and we’re good to go, right? Not really, because that would cause the login widgets to stick to the left side of the screen, which might be even worse than stretching everything. So, we wrap in a Center widget, like this:

Center(   child: Container(     constraints: BoxConstraints(maxWidth: 500),     padding: const EdgeInsets.symmetric(       vertical: 30.0, horizontal: 25.0     ),     child: Column(/* ... */)   ) )

That already looks fine, and we haven’t even had to use either a LayoutBuilder or the MediaQuery.of(context).size. Let’s go one step further to make this look very good, though. It would look better, in my view, if the foreground part was in some way separated from the background. We can achieve that by giving a background color to what’s behind the Container with the input widgets, and keeping the foreground Container white. To make it look a little better, let’s keep the Container from stretching to the top and bottom of the screen on large devices, give it rounded corners, and give it a nice animated transition between the two layouts.

All of that now requires a LayoutBuilder and an outer Container in order both to set a background color and to add padding all around the Container and not just on the sides only on larger screens. Also, to make the change in padding amount animated, we just need to turn that outer Container into an AnimatedContainer, which requires a duration for the animation, which we’ll set to half a second, which is Duration(milliseconds: 500) in code.

Here’s that example of a responsive login page:

(Large preview)
class LoginPage extends StatelessWidget {   @override   Widget build(context) =>     Scaffold(       body: LayoutBuilder(         builder: (context, constraints) {           return AnimatedContainer(             duration: Duration(milliseconds: 500),             color: Colors.lightGreen[200],             padding: constraints.maxWidth < 500 ? EdgeInsets.zero : EdgeInsets.all(30.0),             child: Center(               child: Container(                 padding: EdgeInsets.symmetric(                   vertical: 30.0, horizontal: 25.0                 ),                 constraints: BoxConstraints(                   maxWidth: 500,                 ),                 decoration: BoxDecoration(                   color: Colors.white,                   borderRadius: BorderRadius.circular(5.0),                 ),                 child: Column(                   mainAxisAlignment: MainAxisAlignment.spaceAround,                   children: [                     Text("Welcome to the app, please log in"),                     TextField(                       decoration: InputDecoration(                         labelText: "username"                       )                     ),                     TextField(                       obscureText: true,                       decoration: InputDecoration(                         labelText: "password"                       )                     ),                     RaisedButton(                       color: Colors.blue,                       child: Text("Log in", style: TextStyle(color: Colors.white)),                       onPressed: () {                         Navigator.pushReplacement(                           context,                           MaterialPageRoute(                             builder: (context) => HomePage()                           )                         );                       }                       )                   ]                 ),               ),             )           );         }       )    ); }

As you can see, I’ve also changed the RaisedButton’s onPressed to a callback that navigates us to a screen named HomePage (which could be, for example, the view we built previously with a GridView and a menu or a drawer). Now, though, that navigation part is what we’re going to focus on.

Named Routes: Making Your App’s Navigation More Like A Proper Web App

A common thing for web apps to have is the ability to change screens based on the URL. For example going to https://appurl/login should give you something different than https://appurl/somethingelse. Flutter, in fact, supports named routes, which have two purposes:

  1. In a web app, they have exactly that feature that I mentioned in the previous sentence.
  2. In any app, they allow you to predefine routes for your app and give them names, and then be able to navigate to them just by specifying their name.

To do that, we need to change the MaterialApp constructor to one that looks like the following:

MaterialApp(   initialRoute: "/login",   routes: {     "/login": (context) => LoginPage(),     "/home": (context) => HomePage()   } );

And then we can switch to a different route by using Navigator.pushNamed(context, routeName) and Navigator.pushReplacementNamed(context, routeName), instead of Navigator.push(context, route) and Navigator.pushReplacement(context, route).

Here is that applied to the hypothetical app we built in the rest of this article. You can’t really see named routes in action in DartPad, so you should try this out on your own machine with flutter run, or check the example in action:

(Large preview)
import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(context) =>     MaterialApp(       initialRoute: "/login",       routes: {         "/login": (context) => LoginPage(),         "/home": (context) => HomePage()       }     ); }  class LoginPage extends StatelessWidget {   @override   Widget build(context) =>     Scaffold(       body: LayoutBuilder(         builder: (context, constraints) {           return AnimatedContainer(             duration: Duration(milliseconds: 500),             color: Colors.lightGreen[200],             padding: constraints.maxWidth < 500 ? EdgeInsets.zero : const EdgeInsets.all(30.0),             child: Center(               child: Container(                 padding: const EdgeInsets.symmetric(                   vertical: 30.0, horizontal: 25.0                 ),                 constraints: BoxConstraints(                   maxWidth: 500,                 ),                 decoration: BoxDecoration(                   color: Colors.white,                   borderRadius: BorderRadius.circular(5.0),                 ),                 child: Column(                   mainAxisAlignment: MainAxisAlignment.spaceAround,                   children: [                     Text("Welcome to the app, please log in"),                     TextField(                       decoration: InputDecoration(                         labelText: "username"                       )                     ),                     TextField(                       obscureText: true,                       decoration: InputDecoration(                         labelText: "password"                       )                     ),                     RaisedButton(                       color: Colors.blue,                       child: Text("Log in", style: TextStyle(color: Colors.white)),                       onPressed: () {                         Navigator.pushReplacementNamed(                           context,                           "/home"                         );                       }                     )                   ]                 ),               ),             )           );         }       )    ); }   class HomePage extends StatelessWidget {   @override   Widget build(context) => Scaffold(     appBar: AppBar(title: Text("test")),     drawer: MediaQuery.of(context).size.width < 500 ? Drawer(       child: Menu(),     ) : null,     body: SafeArea(         child:Center(           child: MediaQuery.of(context).size.width < 500 ? Content() :           Row(             children: [               Container(                 width: 200.0,                 child: Menu()               ),               Container(                 width: MediaQuery.of(context).size.width-200.0,                 child: Content()               )             ]           )         )     )   ); }  class Menu extends StatelessWidget {   @override   Widget build(context) => ListView(     children: [       FlatButton(         onPressed: () {},           child: ListTile(           leading: Icon(Icons.looks_one),           title: Text("First Link"),         )       ),       FlatButton(         onPressed: () {},           child: ListTile(           leading: Icon(Icons.looks_two),           title: Text("Second Link"),         )       ),       FlatButton(         onPressed: () {Navigator.pushReplacementNamed(           context, "/login");},           child: ListTile(           leading: Icon(Icons.exit_to_app),           title: Text("Log Out"),         )       )     ]   ); }  class Content extends StatelessWidget {   final List<String> elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"];   @override   Widget build(context) => GridView.builder(     itemCount: elements.length,     gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(       maxCrossAxisExtent: 130.0,       crossAxisSpacing: 20.0,       mainAxisSpacing: 20.0,     ),     itemBuilder: (context, i) => Card(       child: Center(         child: Padding(           padding: EdgeInsets.all(8.0), child: Text(elements[i])         )       )     )   ); }

Onward With Your Flutter Adventure

That should give you an idea of what you can do with Flutter on bigger screens, specifically on the web. It’s a lovely framework, very easy to use, and its extreme cross-platform support only makes it more essential to learn and start using. So, go ahead and start trusting Flutter for web apps, too!

Further Resources

Smashing Editorial (ra, yk, il, al)


Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
new-flutter-project
14 Oct

Animating Apps With Flutter

by TBSCategories: News

Animating Apps With Flutter

Animating Apps With Flutter

Shubham

Apps for any platform are praised when they are intuitive, good-looking, and provide pleasant feedback to user interactions. Animation is one of the ways to do just that.

Flutter, a cross-platform framework, has matured in the past two years to include web and desktop support. It has garnered a reputation that apps developed with it are smooth and good-looking. With its rich animation support, declarative way of writing UI, “Hot Reload,” and other features, it is now a complete cross-platform framework.

If you are starting out with Flutter and want to learn an unconventional way of adding animation, then you are at the right place: we will explore the realm of animation and motion widgets, an implicit way of adding animations.

Flutter is based on the concept of widgets. Each visual component of an app is a widget — think of them as views in Android. Flutter provides animation support using an Animation class, an “AnimationController” object for management, and “Tween” to interpolate the range of data. These three components work together to provide smooth animation. Since this requires manual creation and management of animation, it is known as an explicit way of animating.

Now let me introduce you to animation and motion widgets. Flutter provides numerous widgets which inherently support animation. There’s no need to create an animation object or any controller, as all the animation is handled by this category of widgets. Just choose the appropriate widget for the required animation and pass in the widget’s properties values to animate. This technique is an implicit way of animating.

Animation hierarchy in Flutter. (Large preview)

The chart above roughly sets out the animation hierarchy in Flutter, how both explicit and implicit animation are supported.

Some of the animated widgets covered in this article are:

  • AnimatedOpacity
  • AnimatedCrossFade
  • AnimatedAlign
  • AnimatedPadding
  • AnimatedSize
  • AnimatedPositioned.

Flutter not only provides predefined animated widgets but also a generic widget called AnimatedWidget, which can be used to create custom implicitly animated widgets. As evident from the name, these widgets belong to the animated and motion widgets category, and so they have some common properties which allow us to make animations much smoother and better looking.

Let me explain these common properties now, as they will be used later in all examples.

  • duration
    The duration over which to animate the parameters.
  • reverseDuration
    The duration of the reverse animation.
  • curve
    The curve to apply when animating the parameters. The interpolated values can be taken from a linear distribution or, if and when specified, can be taken from a curve.

Let’s begin the journey by creating a simple app we’ll call “Quoted”. It will display a random quotation every time the app starts. Two things to note: first, all these quotations will be hardcoded in the application; and second, no user data will be saved.

Note: All of the files for these examples can be found on GitHub.

Getting Started

Flutter should be installed and you’ll need some familiarity with the basic flow before moving on. A good place to start is, “Using Google’s Flutter For Truly Cross-Platform Mobile Development”.

Create a new Flutter project in Android Studio.

New flutter project menu in Android Studio. (Large preview)

This will open a new project wizard, where you can configure the project basics.

Flutter project type selection screen. (Large preview)

In the project type selection screen, there are various types of Flutter projects, each catering to a specific scenario.. For this tutorial, choose Flutter Application and press Next.

You now need to enter some project-specific information: the project name and path, company domain, and so on. Have a look at the image below.

Flutter application configuration screen. (Large preview)

Add the project name, the Flutter SDK path, project location, and an optional project description. Press Next.

Flutter application package name screen. (Large preview)

Each application (be it Android or iOS) requires a unique package name. Typically, you use the reverse of your website domain; for example, com.google or com.yahoo. Press Finish to generate a working Flutter application.

The generated sample project. (Large preview)

Once the project is generated, you should see the screen shown above. Open the main.dart file (highlighted in the screenshot). This is the main application file. The sample project is complete in itself, and can be run directly on an emulator or a physical device without any modification.

Replace the content of the main.dart file with the following code snippet:

import 'package:animated_widgets/FirstPage.dart'; import 'package:flutter/material.dart';  void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Animated Widgets',      debugShowCheckedModeBanner: false,      theme: ThemeData(        primarySwatch: Colors.blue,        accentColor: Colors.redAccent,      ),      home: FirstPage(),    );  } }

This code cleans up the main.dart file by just adding simple information relevant to creating a new app. The class MyApp returns an object: a MaterialApp widget, which provides the basic structure for creating apps conforming to Material Design. To make the code more structured, create two new dart files inside the lib folder: FirstPage.dart and Quotes.dart.

The FirstPage.dart file. (Large preview)

FirstPage.dart will contain all the code responsible for all the visual elements (widgets) required for our Quoted app. All the animation is handled in this file.

Note: Later in the article, all of the code snippets for each animated widget are added to this file as children of the Scaffold widget. For more information, This example on GitHub could be useful.

Start by adding the following code to FirstPage.dart. This is the partial code where other stuff will be added later.

import 'dart:math';  import 'package:animated_widgets/Quotes.dart'; import 'package:flutter/material.dart';   class FirstPage extends StatefulWidget {  @override  State createState() {    return FirstPageState();  } }  class FirstPageState extends State with TickerProviderStateMixin {   bool showNextButton = false;  bool showNameLabel = false;  bool alignTop = false;  bool increaseLeftPadding = false;  bool showGreetings = false;  bool showQuoteCard = false;  String name = '';    double screenWidth;  double screenHeight;  String quote;    @override  void initState() {    super.initState();    Random random = new Random();    int quoteIndex = random.nextInt(Quotes.quotesArray.length);    quote = Quotes.quotesArray[quoteIndex];  }   @override  Widget build(BuildContext context) {     screenWidth = MediaQuery.of(context).size.width;    screenHeight = MediaQuery.of(context).size.height;     return Scaffold(      appBar: _getAppBar(),      body: Stack(        children: [          // All other children will be added here.       // In this article, all the children widgets are contained       // in their own separate methods.       // Just method calls should be added here for the respective child.        ],      ),    );  } }

The Quotes.dart file. (Large preview)

The Quotes.dart file contains a list of all the hardcoded quotations. One point to note here is that the list is a static object. This means it can be used at other places without creating a new object of the Quotes class. This is chosen by design, as the above list act simply as a utility.

Add the following code to this file:

class Quotes {  static const quotesArray = [    "Good, better, best. Never let it rest. 'Til your good is better and your better is best",    "It does not matter how slowly you go as long as you do not stop.",    "Only I can change my life. No one can do it for me."  ]; }

The project skeleton is now ready, so let’s flesh out Quoted a bit more.

AnimatedOpacity

To lend a personal touch to the app, it would be nice to know the user’s name, so let’s ask for it and show a next button. Until the user enters their name, this button is hidden, and it will gracefully show up when a name is given. We need some kind of visibility animation for the button, but is there a widget for that? Yes, there is.

Enter AnimatedOpacity. This widget builds on the Opacity widget by adding implicit animation support. How do we use it? Remember our scenario: we need to show a next button with animated visibility. We wrap the button widget inside the AnimatedOpacity widget, feed in some proper values and add a condition to trigger the animation — and Flutter can handle the rest.

_getAnimatedOpacityButton() {   return AnimatedOpacity(     duration: Duration(seconds: 1),     reverseDuration: Duration(seconds: 1),     curve: Curves.easeInOut,     opacity: showNextButton ? 1 : 0,     child: _getButton(),   ); }
Opacity animation of next button. (Large preview)

The AnimatedOpacity widget has two mandatory properties:

  • opacity
    A value of 1 means completely visible; 0 (zero) means hidden. While animating, Flutter interpolates values between these two extremes. You can see how a condition is placed to change the visibility, thus triggering animation.
  • child
    The child widget that will have its visibility animated.

You should now understand how really simple it is to add visibility animation with the implicit widget. And all such widgets follow the same guidelines and are easy to use. Let’s move on to the next one.

AnimatedCrossFade

We have the user’s name, but the widget is still waiting for input. In the previous step, as the user enters their name, we display the next button. Now, when the user presses the button, I want to stop accepting input and show the entered name. There are many ways to do it, of course, but perhaps we can hide away the input widget and show an uneditable text widget. Let’s try it out using the AnimatedCrossFade widget.

This widget requires two children, as the widget crossfades between them based on some condition. One important thing to keep in mind while using this widget is that both of the children should be the same width. If the height is different, then the taller widget gets clipped from the bottom. In this scenario, two widgets will be used as children: input and label.

_getAnimatedCrossfade() {    return AnimatedCrossFade(      duration: Duration(seconds: 1),      alignment: Alignment.center,      reverseDuration: Duration(seconds: 1),      firstChild: _getNameInputWidget(),      firstCurve: Curves.easeInOut,      secondChild: _getNameLabelWidget(),      secondCurve: Curves.easeInOut,      crossFadeState: showNameLabel ? CrossFadeState.showSecond : CrossFadeState.showFirst,    );  }

Cross-fading between the input widget and name widget. (Large preview)

This widget requires a different set of mandatory parameters:

  • crossFadeState
    This state works out which child to show.
  • firstChild
    Specifies the first child for this widget.
  • secondChild
    Specifies the second child.

AnimatedAlign

At this point, the name label is positioned at the center of the screen. It will look much better at the top, as we need the center of the screen to show quotes. Simply put, the alignment of the name label widget should be changed from center to top. And wouldn’t it be nice to animate this alignment change along with the previous cross-fade animation? Let’s do it.

As always, several techniques can be used to achieve this. Since the name label widget is already center-aligned, animating its alignment would be much simpler than manipulating the top and left values of the widget. The AnimatedAlign widget is perfect for this job.

To initiate this animation, a trigger is required. The sole purpose of this widget is to animate alignment change, so it has only a few properties: add a child, set its alignment, trigger the alignment change, and that’s it.

_getAnimatedAlignWidget() {    return AnimatedAlign(  duration: Duration(seconds: 1),  curve: Curves.easeInOut,  alignment: alignTop ? Alignment.topLeft : Alignment.center,  child: _getAnimatedCrossfade(),    );  }
Alignment animation of the name widget. (Large preview)

It has only two mandatory properties:

  • child:
    The child whose alignment will be modified.
  • alignment:
    Required alignment value.

This widget is really simple but the results are elegant. Moreover, we saw how easily we can use two different animated widgets to create a more complex animation. This is the beauty of animated widgets.

AnimatedPadding

Now we have the user’s name at the top, smoothly animated without much effort, using different kinds of animated widgets. Let’s add a greeting, “Hi,” before the name. Adding a text widget with value “Hi,” at the top will make it overlap the greeting text widget, looking like the image below.

The greeting and name widgets overlap. (Large preview)

What if the name text widget had some padding on the left? Increasing the left padding will definitely work, but wait: can we increase the padding with some animation? Yes, and that is what AnimatedPadding does. To make all this much better looking, let’s have the greetings text widget fade in and the name text widget’s padding increase at the same time.

_getAnimatedPaddingWidget() {    return AnimatedPadding(      duration: Duration(seconds: 1),      curve: Curves.fastOutSlowIn,      padding: increaseLeftPadding ? EdgeInsets.only(left: 28.0) : EdgeInsets.only(left: 0),      child: _getAnimatedCrossfade(),    );  }

Since the animation above should occur only after the previous animated alignment is complete, we need to delay triggering this animation. Digressing from the topic briefly, this is a good moment to talk about a popular mechanism to add delay. Flutter provides several such techniques, but the Future.delayed constructor is one of the simpler, cleaner and more readable approaches. For instance, to execute a piece of code after 1 second:

Future.delayed(Duration(seconds: 1), (){     sum = a + b;    // This sum will be calculated after 1 second.     print(sum); });

Since the delay duration is already known (calculated from previous animation durations), the animation can be triggered after this interval.

// Showing “Hi” after 1 second - greetings visibility trigger. _showGreetings() {   Future.delayed(Duration(seconds: 1), () {     setState(() {         showGreetings = true;     });   }); }  // Increasing the padding for name label widget after 1 second - increase padding trigger. _increaseLeftPadding() {   Future.delayed(Duration(seconds: 1), () {     setState(() {     increaseLeftPadding = true;     });   }); }

Padding animation of the name widget. (Large preview)

This widget has only two mandatory properties:

  • child
    The child inside this widget, which padding will be applied to.
  • padding
    The amount of space to add.

AnimatedSize

Today, any app having some kind of animation will include zooming in to or out of visual components to grab user attention (commonly called scaling animation). Why not use the same technique here? We can show the user a motivational quote that zooms in from the center of the screen. Let me introduce you to the AnimatedSize widget, which enables the zoom-in and zoom-out effects, controlled by changing the size of its child.

This widget is a bit different from the others when it comes to the required parameters. We need what Flutter calls a “Ticker.” Flutter has a method to let objects know whenever a new frame event is triggered. It can be thought of as something that sends a signal saying, “Do it now! … Do it now! … Do it now! …”

The AnimatedSize widget requires a property — vsync — which accepts a ticker provider. The easiest way to get a ticker provider is to add a Mixin to the class. There are two basic ticker provider implementations: SingleTickerProviderStateMixin, which provides a single ticker; and TickerProviderStateMixin, which provides several.

The default implementation of a Ticker is used to mark the frames of an animation. In this case, the latter is employed. More about mixins.

// Helper method to create quotes card widget. _getQuoteCardWidget() {   return Card(     color: Colors.green,     elevation: 8.0,     child: _getAnimatedSizeWidget(),   ); } // Helper method to create animated size widget and set its properties. _getAnimatedSizeWidget() {   return AnimatedSize(     duration: Duration(seconds: 1),     curve: Curves.easeInOut,     vsync: this,     child: _getQuoteContainer(),   ); } // Helper method to create the quotes container widget with different sizes. _getQuoteContainer() {   return Container(     height: showQuoteCard ? 100 : 0,     width: showQuoteCard ? screenWidth - 32 : 0,     child: Center(     child: Padding(         padding: EdgeInsets.symmetric(horizontal: 16),         child: Text(quote, style: TextStyle(color: Colors.white, fontWeight: FontWeight.w400, fontSize: 14),),     ),     ),   ); } // Trigger used to show the quote card widget. _showQuote() {   Future.delayed(Duration(seconds: 2), () {     setState(() {         showQuoteCard = true;     });   }); }

Scaling animation of the quotes widget. (Large preview)

Mandatory properties for this widget:

  • vsync
    The required ticker provider to coordinate animation and frame changes.<
  • child
    The child whose size changes will be animated.

The zoom in and zoom out animation is now easily tamed.

AnimatedPositioned

Great! The quotes zoom in from the center to grab the user’s attention. What if it slid up from the bottom while zooming in? Let’s try it. This motion involves playing with the position of the quote widget and animating the changes in position properties. AnimatedPositioned is the perfect candidate.

This widget automatically transitions the child’s position over a given duration whenever the specified position changes. One point to note: it works only if its parent widget is a “Stack.” This widget is pretty simple and straightforward to use. Let’s see.

// Helper method to create the animated positioned widget. // With position changes based on “showQuoteCard” flag. _getAnimatedPositionWidget() {   return AnimatedPositioned(     duration: Duration(seconds: 1),     curve: Curves.easeInOut,     child: _getQuoteCardWidget(),     top: showQuoteCard ? screenHeight/2 - 100 : screenHeight,     left: !showQuoteCard ? screenWidth/2 : 12,   ); }
Position with scaling animation of quotes. (Large preview)

This widget has only one mandatory property:

  • child
    The widget whose position will be changed.

If the size of the child is not expected to change along with its position, a more performative alternative to this widget would be SlideTransition.

Here is our complete animation:

All the animated widgets together. (Large preview)

Conclusion

Animations are an integral part of user experience. Static apps or apps with janky animation not only lower user retention but also a developer’s reputation to deliver results.

Today, most popular apps have some kind of subtle animation to delight users. Animated feedback to user requests can also engage them to explore more. Flutter offers a lot of features for cross-platform development, including rich support for smooth and responsive animations.

Flutter has great plug-in support which allows us to use animations from other developers. Now that it has matured to version 1.9, with so much love from the community, Flutter is bound to get better in the future. I’d say now is a great time to learn Flutter!

Further Resources

Smashing Editorial (dm, og, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us