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.
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.
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!
