KickBackAndCode: Flutter — A New Way To App

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

You can find the slides created for this Meetup here.

What is Flutter?

If you haven’t yet heard of Flutter, it is a framework made by Google for developing mobile applications. Developing using the framework involves the use of the Dart programming language, which is also developed by Google. Dart is an object-oriented programming language with syntax very similar to C#, C++, and Java, so if you have developed using any of these languages you will be able to get started with Dart fairly quickly.

Widgets: The building blocks of Flutter

When developing a Flutter application, everything you make will consist of elements that Flutter calls “Widgets.” Flutter provides a library of these Widgets, which are really just classes that inherit from the root object Widget. Widgets represent a specific functionality or feature within the app and can be anything from a Column, to a Button, to Padding. Yes even styling is handled by Widgets. Similar to web development, components are made by nesting elements inside each other, creating a hierarchy of Widgets. Because Flutter development doesn’t involve templating or styling languages, your business logic can sit side-by-side with your UI logic.

There are two types of Widgets that you can create or use in Flutter, the Stateless Widget or the Stateful Widget. To understand the difference between these, you need to understand the concept of state in object-oriented programming. The state of an object refers to all of the properties or variables contained within the object.

Stateless Widgets

The first and simplest type of Widget in Flutter is the Stateless Widget. The Stateless Widget is a static element that doesn’t keep track of any changing properties. These elements aren’t designed to change and typically won’t, but because of the nesting structure of a Flutter app their properties still can be changed if they are nested inside of a Stateful Widget.

https://flutterdoc.com/stateful-or-stateless-widgets-42a132e529ed

To create a new Stateless Widget, you need to create a class that extends the Stateless Widget class. A good example of this can be the top-level Widget of your app if you are building a simple app with no global variables. Here is the TodoApp Widget we made for the meetup.

class TodoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: HomePage()
);
}
}

Stateful Widgets

Stateful Widgets are more complex Widgets that manage their own varying properties. A favorite button is a good example of a stateful widget. When tapped, the button changes state by becoming “active” and and increasing in count size. Using these changes you can change the appearance of the Widget.

Unlike a Stateless Widget, which uses only a single class, a Stateful Widget consists of 2 classes. The first is the Widget itself and the second encapsulates the Widgets stateful properties as well as the logic to manipulate them. This second object must extend the State class which gives you access to the setState function. Whenever you change stateful properties you must provided a function to setState and change the properties in it. This will let Flutter know that it needs to re-render the Widget.

https://flutter.io/docs/development/ui/interactive

build

The build function is provided by StatefulWidget and StatelessWidget and must be overridden by all Widgets. It must return the Widget tree that defines the Widget you are creating. It is given a property of type BuildContext that provides to the Widget a reference to the tree of Widgets above it.

Why Flutter?

So as you can seem Flutter is relatively simple as it doesn’t consist of many unique components. Building out Widgets is fairly straight-forward. With that said there are tons of other frameworks out there that allow you to use you existing skills to build a mobile app. So why would you want to use Flutter over other frameworks?

Unlike many other frameworks, Flutter compiles your code down to native code for each platform. That means your app is going to function like a native app or better, allowing you to apply complex animations and styles more liberally in your app. The framework is also developed by Google, so there are some big names working to make this framework great.

See you next time!

Slides for the presentation are available:

https://slides.com/michaelbusby/flutter/live#/

The ToDo List App we demoed at the meetup:

https://github.com/mbusbyHub/flutter_app

Check Us Out

We regularly host meetups about the technology we like to use, so stop by our Meetup page or Eventbrite and sign up. If you’re interested in talking or hearing about a topic, let us know!

The Washington Ionic Framework Meetup

Eventbrite

Blast From The Past

We have blog posts for other past meetups. Read them!

What is Reactive Programming?

Implementing Password Reset with Firebase and Angular

Text to Speech and Speech to Text in the Ionic Framework

Easy Virtual Reality with A-Frame

Getting Started with Unit Testing in Ionic 2+ Apps

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implementing a Custom Authorization Policy in Asp.net core

How to maintain sessions with React frontend and Rails backend

Cream Fraîche — A Low Fat Protocol

Clean MVVM Architecture (part 1)

Choosing the Precise Mobile App Development Technology for Your Project

C++ Program to implement Map class

Azure Databricks log runtime errors to Application insights

Accessing of AWS through CLI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Clearly Innovative

Clearly Innovative

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

More from Medium

How to hide app preview when switching apps, with Flutter.

Flutter Custom In-App Keyboard

Flutter : Awesome way for Hybrid Apps

Advantages of Mobile App Development Using Flutter