Flutter For Dummies book cover

Flutter For Dummies

Author:
Published: August 4, 2020

Overview

Create awesome iOS and Android apps with a single tool!  

Flutter is an app developer’s dream come true. With Google’s open source toolkit, you can easily build beautiful apps that work across platforms using a single codebase. This flexibility allows you to get your work out to the widest possible audience. With Flutter already being used by thousands of developers worldwide in a market where billions of apps are downloaded every year, now is the right time to get ahead of the curve with this incredible tool.  

Flutter for Dummies is your friendly, ground-up route to creating multi-platform apps.       

From how to construct your initial frameworks to writing code in Dart, you’ll find the essentials you need to ride the Flutter revolutionary wave to success. This book includes how to create an intuitive and stunning UI, add rich interactivity, and easily pull in data. You’ll also see how Flutter features like Hot Reload—providing sub-second refreshes as you refine your work—help you make sure your app is a delight to use. 

  • Start simple: follow steps to build a basic app 
  • It’s alive! Keep connected to online data 
  • It moves! Make things fun with animated features 
  • Get the word out: use tips to expand your audience  

Whether you’re a fledgling developer or an expert wanting to add a slick feather to your programming cap, join the Flutter revolution now and soar above the rest! 

Create awesome iOS and Android apps with a single tool!  

Flutter is an app developer’s dream come true. With Google’s open source toolkit, you can easily build beautiful apps that work across platforms using a single codebase. This flexibility allows you to get your work out to the widest possible audience. With Flutter already being used by thousands of developers worldwide in a market where billions of apps are downloaded every year, now is the right time to get ahead of the curve with this incredible tool.  

Flutter for Dummies is your friendly, ground-up route to creating multi-platform apps.       

From how to construct your initial frameworks to writing code in Dart, you’ll find the essentials you

need to ride the Flutter revolutionary wave to success. This book includes how to create an intuitive and stunning UI, add rich interactivity, and easily pull in data. You’ll also see how Flutter features like Hot Reload—providing sub-second refreshes as you refine your work—help you make sure your app is a delight to use. 

  • Start simple: follow steps to build a basic app 
  • It’s alive! Keep connected to online data 
  • It moves! Make things fun with animated features 
  • Get the word out: use tips to expand your audience  

Whether you’re a fledgling developer or an expert wanting to add a slick feather to your programming cap, join the Flutter revolution now and soar above the rest! 

Flutter For Dummies Cheat Sheet

Flutter's online documentation is a great source of information, but sometimes you'd rather glance quickly at an example. This cheat sheet has some sample code. Just grab it and go! [caption id="attachment_271271" align="alignnone" width="556"] ©Eny Setiyowati/Shutterstock.com[/caption]

Articles From The Book

10 results

App Development Articles

Setting Device Orientation in Your Flutter App

How big is the device you’ll be running your Flutter app on? The answer is "You don't know." You can run a Flutter app on a small iPhone 6, or in a web page on a 50-inch screen. You want your app to look good no matter what size the device happens to be. How can you do that? The Dart code below has the answer Checking Device Orientation in a Flutter App

// App0613.dart

import 'package:flutter/material.dart';

import 'App06Main.dart';

Widget buildColumn(context) {
 if (MediaQuery.of(context).orientation == Orientation.landscape) {
  return _buildOneLargeRow();
 } else {
  return _buildTwoSmallRows();
 }
}

Widget _buildOneLargeRow() {
 return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
   Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
     buildRoundedBox("Aardvark"),
     buildRoundedBox("Baboon"),
     buildRoundedBox("Unicorn"),
     buildRoundedBox("Eel"),
     buildRoundedBox("Emu"),
     buildRoundedBox("Platypus"),
    ],
   ),
  ],
 );
}

Widget _buildTwoSmallRows() {
 return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
   Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
     buildRoundedBox("Aardvark"),
     buildRoundedBox("Baboon"),
     buildRoundedBox("Unicorn"),
    ],
   ),
   SizedBox(
    height: 30.0,
   ),
   Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
     buildRoundedBox("Eel"),
     buildRoundedBox("Emu"),
     buildRoundedBox("Platypus"),
    ],
   ),
  ],
 );
}
The following images show what happens when you run the Dart code above. When the device is in portrait mode, you see two rows, with three boxes on each row. But when the device is in landscape mode, you see only one row, with six boxes. Here's the portrait option. And the landscape mode. The difference comes about because of the if statement in the above Dart code.
if (MediaQuery.of(context).orientation == Orientation.landscape) {
 return _buildOneLargeRow();
} else {
 return _buildTwoSmallRows();
}
Yes, the Dart programming language has an if statement. It works the same way that if statements work in other programming languages.
if (a certain condition is true) {
 Do this stuff;
} otherwise {
 Do this other stuff;
}
In the name MediaQuery, the word Media refers to the screen that runs your Flutter app. When you call MediaQuery.of(context), you get back a treasure trove of information about that screen, such as
  • orientation: Whether the device is in portrait mode or landscape mode
  • height and size.width: The number of dp units from top to bottom and across the device's screen
  • longestSide and size.shortestSide: The larger and smaller screen size values, regardless of which is the height and which is the width
  • aspectRatio: The screen's width divided by its height
  • devicePixelRatio: The number of physical pixels for each dp unit
  • padding, viewInsets, and viewPadding: The parts of the display that aren't available to the Flutter app developer, such as the parts covered up by the phone's notch or (at times) the soft keyboard
  • alwaysUse24HourFormat: The device's time display setting
  • platformBrightness: The device's current brightness setting
  • . . . and many more
For example, a Pixel C tablet with 2560-by-1800 dp is big enough to display a row of six animal boxes in either portrait or landscape mode. To prepare for your app to run on such a device, you may not want to rely on the device's orientation property. In that case, you can replace the condition in the code above with something like the following:
if (MediaQuery.of(context).size.width >= 500.0) {
 return _buildOneLargeRow();
} else {
 return _buildTwoSmallRows();
}
Notice the word context in the code MediaQuery.of(context). In order to query media, Flutter has to know the context in which the app is running. That's why, _MyHomePage class's build method has a BuildContext context parameter. Want to learn more tricks? Avoid these ten mistakes when programming your Flutter app.

App Development Articles

Using Android Studio to Develop Flutter Apps

Android Studio is a customized version of IntelliJ IDEA — a general-purpose IDE with tools for Java development, C/C++ development, PHP development, modeling, project management, testing, debugging, and much more. Here, you get an overview of Android Studio's main window. The focus here is on the most useful features that help you build Flutter apps, but keep in mind that Android Studio has hundreds of features and many ways to access each feature.

Starting up Android Studio

Each Flutter app belongs to a project. You can have dozens of projects on your computer's hard drive. When you run Android Studio, each of your projects is either open or closed. An open project appears in a window (its own window) on your computer screen. A closed project doesn't appear in a window. Several of your projects can be open at the same time. You can switch between projects by moving from window to window.

Here, an open project's window is often referred to as Android Studio's main window. This can be slightly misleading because, with several projects open at a time, you have several main windows open at a time. In a way, none of these windows is more “main” than the others. When you see the term main window here, it’s a reference to the window whose Flutter project you're working on at that moment.

If Android Studio is running and no projects are open, Android Studio displays its Welcome screen. The Welcome screen may display some recently closed projects. If so, you can open a project by clicking its name on the Welcome screen. For an existing app that's not on the Recent Projects list, you can click the Welcome screen's Open an Existing Android Studio Project option. If you have any open projects, Android Studio doesn't display the Welcome screen. In that case, you can open another project by choosing File→Open or File→Open Recent in an open project's window. To close a project, you can choose File→Close Project, or you can do whatever you normally do to close one of the windows on your computer. (On a PC, click the X in the window's upper right corner. On a Mac, click the little red button in the window's upper left corner.)

Android Studio remembers which projects were open from one run to the next. If any projects are open when you quit Android Studio, those projects open again (with their main windows showing) the next time you launch Android Studio. You can override this behavior (so that only the Welcome screen appears each time you launch Android Studio). In Android Studio on a Windows computer, start by choosing File→Settings→Appearance and Behavior→System Settings. In Android Studio on a Mac, choose Android Studio→Preferences→Appearance and Behavior→System Settings. In either case, uncheck the Reopen Last Project on Startup check box.

Android Studio’s main window

Android Studio's main window is divided into several areas. Some of these areas can appear and disappear on your command. What comes next is a description of the areas you see below, moving from the top of the main window to the bottom.

The areas that you see on your computer screen may be different from the areas you see above Usually, that's okay. You can make areas come and go by choosing certain menu options, including the View option on Android Studio's main menu bar. You can also click the little tool buttons on the edges of the main window.

The top of the main window in Android Studio

The topmost area of Android Studio contains the toolbar and the navigation bar.
  • The toolbar contains action buttons, such as Open and Save All. It also contains the Target Selector and the Run icon.

The Target Selector is the dropdown list whose default option is . In the image above, the Target Selector displays the name iPhone XR.

The Run icon is the thing that looks like a green Play button.

  • The navigation bar displays the path to one of the files in your Flutter project.

A Flutter project contains many files, and, at any particular moment, you work on one of these files. The navigation bar points to that file.

The Project tool window in Android Studio

Below the main menu and the toolbars, you see two different areas. The area on the left contains the Project tool window, which you use to navigate from one file to another within your Android app. At any given moment, the Project tool window displays one of several possible views. For example, in the image above, the Project tool window displays its Project view. In the image below, the drop-down list was clicked and Packages view selected (instead of Project view). Packages view displays many of the same files as Project view, but in Packages view, the files are grouped differently. When you get started with Flutter app development, the Project tool window is in its default view; namely, Project view.

If Android Studio doesn't display the Project tool window, look for the Project tool button — the little button displaying the word Project on the left edge of the main window. Click that Project tool button. (But wait! What if you can't find the little Project button? In that case, go to Android Studio's main menu and select Window→Restore Default Layout.)

The Editor area in Android Studio

The area to the right of the Project tool window is the Editor area. When you edit a Dart program file, the editor displays the file's text. You can type, cut, copy, and paste text as you would in other text editors. The Editor area can have several tabs. Each tab contains a file that's open for editing. To open a file for editing, double-click the file's branch in the Project tool window. To close the file, click the little x next to the file's name on the Editor tab.

The lower area in Android Studio

Below the Project tool window and the Editor area is another area that contains several tool windows. When you're not using any of these tool windows, you might not see this lower area. In the lower area, the tool window that’s often used in the Flutter app development process is the Run tool window. The Run tool window appears automatically when you click the Run icon. This tool window displays information about the run of a Flutter app. If your app isn't running correctly, the Run tool window may contain useful diagnostic information. You can force other tool windows to appear in the lower area by clicking tool buttons near the bottom of the Android Studio window. For example, when you click the Terminal tool button, Android Studio displays the Windows Command Prompt, the Mac Terminal app, or another text-based command screen that you specify.

A particular tool button might not appear when there's nothing you can do with it. For example, the Run tool button might not appear until you press the Run icon. Don't worry about that. The tool button shows up whenever you need it.

The status bar

The status bar is at the bottom of Android Studio's window. The status bar tells you what's happening now. For example, if the cursor is on the 37th character of the 11th line in the editor, you see 11:37 somewhere on the status line. When you tell Android Studio to run your app, the status bar contains the Run tool window's most recent message.

The kitchen sink

In addition to the areas described above, other areas might pop up as the need arises. You can dismiss an area by clicking the area's Hide icon. Ready to give it a try? Use this guide to learn how to run your first Flutter app in Android Studio.

App Development Articles

Flutter Animation: Making Size and Color Changes

With Flutter's Animation class, you're not restricted to moving things. You can control the change of any value you think needs changing. The example you find here illustrates how to make changes to an icon's size and color in Flutter. Changing a Few Flutter Animation Values

// App0904.dart

import 'package:flutter/material.dart';

import 'App09Main.dart';

extension MyHomePageStateExtension on MyHomePageState {
 Animation getAnimation(AnimationController controller) {
  return Tween(begin: 50.0, end: 250.0).animate(controller)
   ..addListener(() {
    setState(() {});
   });
 }

 Widget buildPositionedWidget() {
  int intValue = animation.value.toInt();
  return Center(
   child: Icon(
    Icons.child_care,
    size: animation.value,
    color: Color.fromRGBO(
     intValue,
     0,
     255 - intValue,
     1.0,
    ),
   ),
  );
 }
}
When the above Flutter app starts running, a small, blue-colored baby face appears on the screen. When the user presses Forward, the baby face grows and turns color from blue to red. The icon in the code above has two properties whose values can change.
  • The size property changes along with value.

The icon grows from 50.0 dps to 250.0 dps.

  • As the animation progresses, the color property's redness shrinks and its blueness grows.

If you have experience developing Flutter apps, you may be familiar with Flutter's Color.fromRGBO constructor. The constructor's parameters are int values representing amounts of red, green, and blue and a double value that represents opacity. In the code above, the amount of red increases from 50 to 250, and the amount of blue decreases from 205 to 5.

The moral of this article is, an Animation instance's value can mean anything you want it to mean. In the code you find here, the animation's value controls an icon's size and color. What value would you like to animate? Rotation? Sound volume? Speed? Curvature? Shadow? Background color? Border shape? Mood? The price of a For Dummies book? Be creative. Want to get better at developing Flutter apps? Avoid these ten mistakes.