Flutter Development in Ubuntu 20.04
Last Updated :
17 Mar, 2025
In this article, let's look at how you can set up a development environment for Flutter if you're using Ubuntu 20.04. It was difficult earlier and was kind of a nightmare to get it done. But now, it has changed, and anyone can easily set up a flutter development environment on their Ubuntu system in a few minutes.
Flutter on UbuntuLet's break down the things that we have to do. Before moving any further, please make a note that we will be setting up Flutter in VS Code since it allows a much smoother performance on almost any system (even if your system has 4GB of Ram or less). I personally have experienced the advantage of using VS Code, where I reduced overall time taken for various tasks by nearly 75% when compared to the time taken while using Android Studio.
The process involved in the setting up process are :
Step 1: Downloading VS Code
VS Code or Visual Studio Code is an amazing all-in-one code editor developed by the team at Microsoft. It is free and open-sourced. You can download VS Code from here. It doesn't have much download size and is easy to set up. You can also use the terminal to install the VS Code on your system, by running the following code :
$ sudo apt install code
Step 2: Downloading Flutter SDK
After installing VS Code, we need to install Flutter SDK so that it will enable VS Code to build flutter applications. In order to install the flutter SDK, you have to open your terminal again and run the following line of code (or follow similar instructions from the Flutter Website) :
$ sudo snap install flutter --classic
Once you're done installing the VS Code and Flutter SDK, let's try opening VS Code. If there hadn't been any installation errors, VS Code will open without any issue. After loading up, we need to enable Git which is a version control system (VCS) which will be really helpful in the later stages. For this, select VCS Option from the left side of the VS Code.
Please refer to the below image if you're new to VS Code.
VCS in VS CodeAfter selecting that, you will find an option to install Git. Once you click on that, you will be taken to the website from which you can download Git for your system.
You can also install Git by running the following code on your terminal.
$ sudo apt update
$ sudo apt install git
After Installing Git, come back to the VS Code and select the Extensions (the icon present at two down the position with that of VCS).
Extension Shortcut
From that, you have to search for flutter and install that extension. Also, make sure that Dart is also installed in the same method.
Installing Flutter Extension
Now you're nearly ready to go. There is one more final installation that you need to perform before you're all set to go. You will have to install Android Studio for all the essential packages like ADB Manager or if you need to add any virtual devices via AVD Manager.
Step 3: Installing Android Studio
As said above, though we may be able to download all the packages separately, it may lead on to some errors. To avoid that, let's install Android Studio so that all the essential packages will get added correctly. You can install Android Studio by running the following command on the terminal.
First install JDK :
$ sudo apt install openjdk-11-jdk
Now, you can install Android Studio :
$ sudo snap install android-studio --classic
After installing Android Studio, open it from the Applications directory and run it. You will be asked whether to import any settings and select 'Do not import' for that. Move ahead with the installation flow and finally, all the installation will be over. After the installation is over, you will reach the starting page. From there select the 'Configure' option present on the right side bottom.
Configure option
Now, you have to select 'SDK Manager' from the list and you will be redirected to a page where you can install the required Android SDKs for various Android OS Versions. Please make sure that you're installing the SDK of the same version as that of your phone or the virtual device which you will be setting up later. Select them and click on 'Apply'. After that, you will be prompted to install them and follow the procedure.
Select the required SDKs
Once everything is complete, close everything including Android Studio as well as VS Code. You can restart VS Code now. Within VS Code, you can create a new workspace folder (where your project files will be stored). After that, click on View from the top Tool Bar and select the Command Panel.
In that type in Flutter New Project and select it. If everything has been set up correctly, you will be asked to type in your project name. Sometimes, you will be asked to locate the Flutter SDK. In that case, provide the location where you installed the Flutter SDK.
If there were no errors, a project of the name that you provided will load up in a moment. The same can also be achieved by running the following command on the terminal present on VS Code (select Terminal from the toolbar on the top and run the following command.
flutter create project_name
where project_name can be changed with the name of your preference. Once the project loads completely, all the files can be accessed from the Files section of VS Code present on the left side tool bar (2 positions above that of the VCS).
You may connect your physical device (android) for installing the application or you may install a new Android Virtual Device from the AVD Manager, just like how we installed the SDKs from SDK Manager. The Run option can be found just below VCS and it can be used to run and debug your application.
Similar Reads
Basics
Flutter TutorialThis Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Flutter | An introduction to the open source SDK by GoogleFlutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Architecture ApplicationFlutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Android Studio Setup for Flutter DevelopmentThis article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a
3 min read
Getting Started with Cross-Platform Mobile Application using FlutterFlutter is an open-source mobile application development SDK created by Google to develop cross-platform mobile applications. Flutter makes it extremely easy and fast for even novice programmers (computer programmers who are not experienced in any programming languages) to build high-quality and res
7 min read
Flutter Development in Ubuntu 20.04In this article, let's look at how you can set up a development environment for Flutter if you're using Ubuntu 20.04. It was difficult earlier and was kind of a nightmare to get it done. But now, it has changed, and anyone can easily set up a flutter development environment on their Ubuntu system in
5 min read
Key Widgets
UI Components
Flutter - TabsTabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To
2 min read
Flutter - Horizontal ListIn Flutter there can be Two types of lists, namely, horizontal list and vertical list. Both these lists are created using the ListView constructor and assigning the scrollDirection parameter. By default, the scroll direction parameter is vertical for a vertical list but it can be overridden by passi
3 min read
Flutter - Expansion Tile CardThe Expansion Tile Card works similarly to that of the Flutter SDK's standard expansion tile. But it uses the style used by Google itself in its products to raise a tile. It can be called a better version of the Flutter's ExpansionTileCard. In this article, we will look into the process of implement
3 min read
Icon Class in FlutterIcon class in Flutter is used to show specific icons in our app. Instead of creating an image for our icon, we can simply use the Icon class for inserting an icon in our app. For using this class you must ensure that you have set uses-material-design: true in the pubsec.yaml file of your object.Synt
2 min read
Expanded Class in FlutterWhen we create any child of a row or column we provide the size of the widget according to the screen size but sometimes when we provide more size of child as compared to screen size we get a warning and our widget goes out of the screen for resolving this we put a child of a row or column in an exp
3 min read
Flutter - DialogsThe dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different typ
5 min read
Flutter - Circular & Linear Progress IndicatorsProgress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes.In Flutter, progress can be displayed in two ways:
4 min read
Flutter - Staggered Grid ViewStaggered Grid View is a type of layout that is used to display images and posts. As you see in various social platforms such as Pinterest, Instagram and many more. The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great User Experience. Staggered Grid View
4 min read
Design & Animations
Customizing Fonts in FlutterCustomization is everywhere, from documents to apps, we can customize everything as we want to. The power of customization is humongous, and it has revolutionized the way we look at technology in this world. Just like how printing "Hello World", is the basic step towards learning a new programming l
4 min read
Flutter - Skeleton TextIn Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connect
3 min read
Flutter - ThemesThemes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and n
3 min read
Flutter - Lazy LoaderThe Lazy loader is a wrapper to the ScrollView that enables lazy loading. It is very useful in situations where the application's intent is to show endless content in a ListView. For instance, Instagram, Facebook, Youtube and most social networking platforms use them to deliver an endless stream of
5 min read
Flutter - UI OrientationAll applications should be able to adjust their User Interface (UI) based on the orientation of the phone. By orientation, we implicate the portrait and landscape mode in smartphones rather the physical orientation. In, Flutter it is done so by using the OrientationBuilder, which determines the app'
2 min read
Flutter - Animation in Route TransitionRoutes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition
3 min read
Flutter - Physics Simulation in AnimationPhysics simulation in Flutter is a beautiful way to Animate components of the flutter app to make it look more realistic and interactive. These can be used to create a range of animations like falling objects due to gravity to making a container seem attached to a spring. In this article, we will ex
4 min read
Flutter - Radial Hero AnimationA Radial transformation means turning a circular shape into a square shape. In Radial Hero animation the same is done with a Hero. In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamenta
3 min read
Flutter - Hinge AnimationAnimations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil
4 min read
Flutter - Lottie AnimationVisualization is an integral part of any application. Animations can highly glorify the UI of an app, but animations can be hectic to implement for an application. This is where the Lottie animation comes in. Lottie is a JSON-based animation file. It can be used both as a network asset and a static
3 min read
Forms & Gestures
Navigation & Routing
URLs in FlutterWhile surfing the net, every user will come across many buttons, text, etc., that would redirect the user to a different webpage in the same tab or in a different tab when clicked. In the same way, when a developer links a URL to a button or text in an app, the app will open the website when clicked
5 min read
Routes and Navigator in FlutterRoute: Apps are the new trend. The number of apps available in the Play Store and App Store nowadays is quite a lot. The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called Routes. In android, these pages/screens are referred to
4 min read
Flutter - WebSocketsWebSockets are used to connect with the server just like the http package. It supports two-way communication with a server without polling.In this article, we will explore the below-listed topics related to WebSockets in Flutter:Connecting to a WebSocket serverListen to messages from the server.Send
3 min read
Flutter - Named RoutesAn app has to display multiple screens depending upon the user's needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator.Note: In Flutter, screens and pages are called routes. Steps to Implement Named Routes in FlutterSt
3 min read
Flutter - Arguments in Named RoutesNavigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can
4 min read
Multi Page Applications in FlutterApps are widely used by humans in this techie world. The number of apps in the app store is increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so
5 min read
Flutter - Updating Data on the InternetIn today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. Let's see a sample video of what we are going to develop.Sample Video:St
5 min read
Flutter - Fetching Data From the InternetIn today's world, most applications heavily rely on fetching information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore this concept.Steps to Implement Data Fetching from the InternetStep 1 : Create a new flutter ap
4 min read
Flutter - Deleting Data On The InternetIn this article, we will explore the process of deleting data on the internet. Before deleting data on the internet, we will fetch the data first and then will delete the data.Steps to implement Deleting Data on the InternetStep 1 : Create a new flutter applicationCreate a new Flutter application us
4 min read
Flutter - Sending Data To The InternetInteracting with the Internet is crucial for most apps to function. In Flutter, sending data to the internet is one of them, and the http package is used to send the data to the internet. In this article, we will explore the same topic in detail. Steps to Implement Sending Data to the InternetStep 1
5 min read
Flutter - Send Data to ScreenInteraction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read
Hardware Interaction
Gallery Access and Camera in FlutterWe can add images from the gallery using the image_picker package in Flutter. For this, you'll need to use your real device.Steps to Implement Gallery and Camera AccessStep 1: Create a new flutter applicationCreate a new Flutter application using the command Prompt. To create a new app, write the be
3 min read
Camera Access in FlutterTo add images from the camera in Flutter, we'll use the image_picker package. For this, you'll need to use your real device.Follow the below steps to display the images from the cameraStep 1: Create a new Flutter ApplicationCreate a new Flutter application using the command Prompt. To create a new a
3 min read
Background local notifications in FlutterSometimes user wants some essential features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android
6 min read
Restrict Landscape mode in FlutterIn this article, we'll learn how to restrict landscape mode in the flutter app. A production-ready app should be free from all sorts of bugs and errors. Mostly, we design our app for portrait orientation if we flip to landscape orientation, the UI might not be adjusted for that. So, there are two ca
2 min read
Sample Flutter Apps
Basic Quiz App In FlutterFlutter SDK is an open-source software development kit for building beautiful UI that is natively compiled. Currently, it is available as a stable version for iOS and Android OS. In this app, we are going to have the features or modules mentioned below:Five multiple-choice questions ( more questions
8 min read
A Hello World App using FlutterIn Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgetsStateless WidgetStateful WidgetInherited WidgetIn this article, we will use S
3 min read
Flutter - Simple PDF Generating AppFlutter Community has created several packages to work with PDFs in our apps. In this article, we will be creating a simple PDF-generating app. This application will convert plain text to PDF. The packages that we are going to need are listed below with their uses:pdf: It is a PDF creation library f
9 min read
Flutter - Magic 8 Ball AppWe will be building a Magic 8-Ball app that will give you the answers to all fun, tricky questions (basically, it is a fun game app that will change its state of image using Textbutton in Stateful widgets). For this, we will use Stateless and Stateful Flutter widgets and a Textbutton. Steps to build
3 min read
Advance Concepts