Introduction to Flutter – DevOps.com

Flutter Pulumi Bitbucket Atlassian composable enterprise low-code SlackOps

Flutter is a development tool for building cross-platform apps. Flutter was created by Google to help developers create frontends that work on almost any operating system including Android, iOS, Mac, Linux, Windows desktop and web.

Are you ready to check? First you need to install the Flutter software development kit (SDK).

To use the Flutter SDK, you must have git installed on your computer; Here are some tips for installing according to your operating system:

  • Windows: Download here.
  • Mac: Although you can install Git manually, the best you can do is install Xcode with Git; You will need XCode later.
  • Linux: In addition to Git, you’ll need a few other tools listed here. If you’re on Ubuntu or Debian, you can get it all with one command: sudo apt install git zip unzip curl xz-utils libglu1-mesa
  • ChromeOS: This option requires you to enable Linux on ChromeOS. Then you’ll want to install the same packages I just listed for Linux.

Once the above prerequisites are met, you can download Flutter by going to: this link.

You can download the SDK for your operating system or get it from GitHub. Only try the GitHub option if you are familiar with cloning Git repositories.

In this example, I will download the Windows version by clicking the Windows link which brings up the screen shown below. Pay close attention to the warnings about where to install the SDK, especially for Windows. (I like to have a folder called c:dev where I put all my development work and a folder called c:devtools under it. So the latter is the folder where I will put the SDK.)

After the file is downloaded, extract it to a location such as c:devtools.

For Windows, Linux and ChromeOS, the next step is to update your path so that the system can find the tools located in the bin folder of the Flutter folder. (Mac users don’t need to perform this step.) Flutter setup documentation helps here:

  • Windows: Be sure to use the full path, starting with the name of the folder where you extracted the zip file. For example, on my machine this would be C:devtoolsflutterbin as shown in the image below. Then, after updating the path, you need to close and reopen your command line shell (Windows CMD or Powershell). For detailed instructions, go here.
  • Linux: Watch this: instructions are here.
  • ChromeOS: instructions are here.

Now test the Flutter command to make sure Flutter works by going to a folder outside of the bin folder and typing:

flutter --version

You should see a message like this:

Flutter 3.3.9 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b8f7f1f986 (2 weeks ago) • 2022-11-23 06:43:51 +0900
Engine • revision 8f2221fbef
Tools • Dart 2.18.5 • DevTools 2.15.0

This will tell you if the installation is probably ready. If instead you see a message that the command was not found, make sure your path is correct; this is usually the most likely cause of this error.

Now, why did I say ‘probably’? Because Flutter itself can tell you if there are other tools you’ll need by running this command:

flutter doctor

Here is an example of what I see when I run it:

This tells me that some required tools are installed, but not all:

  • Flutter itself and all the tools that come with it
  • Android toolchain: I don’t have this.
  • Chrome browser: You will need this to debug web versions of your app.
  • Visual Studio: This is the full IDE from Microsoft; you will need this if you want to develop your application for Windows Desktop. You can use the free Community version. go for it here and select the free Community version.
  • Android Studio: I don’t have this.
  • VS Code: This refers to Visual Studio Code, which is Microsoft’s free editor/IDE and is not the same as Visual Studio. It is a separate tool and neither is dependent on the other. Read my notes below before installing.

Before you install anything else, you’ll want to decide which platforms to target. If you’re going to include Android in this list, you’ll need to download and install both the Android toolchain and Android Studio. In this case, you will be developing from within Android Studio.

But unless you’re targeting Android, you don’t need to install the Android toolchain or Android Studio. The official setup documentation is a bit vague at this point, so I tested it myself. I was able to target the Windows desktop and a browser without needing to install any of the Android tools.

Unless you’re targeting Android, you’ll want to install VS Code to do your development from the inside. You can do find here.

For this example, I’ll go with Windows and create a quick Windows desktop application.

In a command shell, I will first create a folder in my c:dev to hold my projects by typing these commands:

cd c:dev
md projects
cd projects

I will make a Flutter app called flutter_demo by typing the following. (Make sure you are in the projects folder before typing this):

flutter create flutter_demo

Note that your project name must be all lowercase and may contain underscores. So, for example, using capital letters results in an error:

If I write this:

flutter create FlutterDemo

I am seeing that:

"FlutterDemo" is not a valid Dart package name.
See https://dart.dev/tools/pub/pubspec#name for more information.

When done correctly, you will see output like this:

Creating project flutter_demo...
Running "flutter pub get" in flutter_demo... 1,186ms
Wrote 127 files.
All done!
In order to run your application, type:
$ cd flutter_demo
$ flutter run
Your application code is in flutter_demolibmain.dart.

Let’s run the code before we open it! First, navigate to the newly created flutter folder:

cd flutter_demo

Then run it by typing:

flutter run

This command will run the Flutter application located in the current folder. In this case, this is the app you just created.

When you launch it, it will ask for some options. I only see Windows Desktop and Chrome and Edge options as I don’t have Android or emulator installed. (Edge is based on Chrome, so it works too.) Here’s what I’ve seen:

Multiple devices found:
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.2130]
Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.107
Edge (web) • edge • web-javascript • Microsoft Edge 106.0.1370.37
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (To quit, press "q/Q"):

Press option for Windows. This will create and start the Windows desktop version (which may take up to a minute) and result in a window that looks like this:

It’s not much, but there is an example in which you can click the plus sign and see the number in the middle increment. This much.

Now let’s try to run the same application in Chrome. First, close the application window and press the Up Arrow or retype:

flutter run

This time, select the Chrome option.

Now Flutter creates a web-ready version that runs in Chrome, starts a local web server to host the app, launches Chrome and sends a URL to Chrome to load the app from the local web server. Here is the browser window:

Note that it looks almost identical to the desktop version, but this time inside a browser.

If you’re a web developer, I recommend right-clicking inside the browser app and selecting View Page Source. Note that there is a line that loads a file called Flutter.js and some JavaScript code that responds to the Load event of the window that calls Flutter. You won’t be writing JavaScript code, but it’s always good to have at least some knowledge of what your UI does!

Now let’s add some to the sample code. I will use VS Code for this. From the home folder of the application (c:devprojectsflutter_demo in my case) type

code .

(Make sure to add a period after the wordcode or else VS Code will open in the folder it was last run in.)

Before getting into the code, you’ll want to install a custom Flutter extension for VS Code. Click the gear in the bottom left and click Extensions. In the box labeled Search Extensions on Marketplace, type flutter. (Don’t click Enter; pause for a moment and the search will begin.) Find one called Flutter, which has over five million downloads, as shown here:

Click the upload button. The button will display “installing” while the extension is being downloaded and installed.

Once the extension is installed, VS Code will ask if you want to use it with your current project. You may also see a message about updating the Dart extension that comes with Flutter. Click Yes for Flutter; Click Get packages for darts. (You can ignore the message about opening the settings file.)

You now have various flutter tools available in the VS Code’s Extensions Palette. Press Ctrl+Shift+P to open the palette. Type flutter and you will see the full list.

But for now, let’s run the app first. Click the Run menu, then click Run Without Debugging. You will see the Windows application open again.

Now back to VS Code. Even if you are not familiar with Dart, you can use C++, C#, Java, JavaScript etc. If you’re familiar with other “curly brace” languages, you’ll probably be able to read the code. There is a function called main() that initializes the application and provides a class called MyApp. This class is further down in the code. Take a close look at all the comments. Read them carefully and learn from them. The MyApp class contains a struct function that returns an object that is a “home” member; this member is an instance of MyHomePage, which is also a class in this file. Keep reviewing this code and you’ll see widgets and layouts mentioned. Take a close look at the function called _incrementCounter and how it is then triggered via an onPressed event.

Play with code; For example, try changing some of the string literals until you’re completely familiar with it. Then dive into the first demo provided by the Flutter folks at Google, you can find here. Soon you’ll be up and running with your own Flutter app that you can run on any device!

#Introduction #Flutter #DevOpscom

Leave a Reply

Your email address will not be published. Required fields are marked *

Toby Moore: Learn as you go
command-line

Toby Moore: Learn as you go

When my father, his publisher, and I started building a web platform for independent filmmakers, I didn’t know what I was getting myself into. Immediately, I was asked to learn to do things I had never done before. It’s the first time I’ve managed a startup. My previous background was almost entirely art. The thoughts […]

Read More
HELPFUL TIPS WHEN APPLYING TO COLLEGE |  lifestyles
command-line

HELPFUL TIPS WHEN APPLYING TO COLLEGE | lifestyles

As I’ve gone through the college application process twice over the years, I feel compelled to warn parents: Things have changed dramatically since we applied to schools. That day, I applied to two private universities and submitted my test scores and transcript to the most important public institution in my state. This was enough to […]

Read More
6 Best Java Programming Books by Review Scores
command-line

6 Best Java Programming Books by Review Scores

Programming languages ​​can be difficult to get used to. This is especially true in languages ​​with different iterations. Java is one of these languages. Despite the similarity in names, Java has many features that set it apart from JavaScript, from its increased complexity to the differences in the way it works. Even for those familiar […]

Read More