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:
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:
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:
Then run it by typing:
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:
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:
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.
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
(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.
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