A Simple Flutter Web App
This is the most simple, yet useful, web app I could come up with
--
What we'll build?
A simple web app called The Background App. It'll be just a canvas colored with a default color. We'll be able to manipulate the color by passing it as a parameter in the URL of the browser.
Why is this useful? Sometimes I want to grab screenshots of certain on-screen elements and have a specific color fill as background. So the use case will be that we'll go to that web app, set the desired color, and bring the elements we want to capture on top. Then, we do the capture with Cmd + Shift + 4 on Mac, or Windows key + Shift + S on Windows.
The environment
I'm developing a simple example web app using the latest master channel. The development machine that I'm using is a Mac and the IDE of choice for this exercise is IntelliJ IDEA Community Edition. Also, I have the Flutter SDK and the Flutter + Dart plugins installed. You can follow along using the Visual Studio Code IDE as well. Chrome browser should be installed too.
Building it up
We'll work with the Terminal, although you can create the project using IntelliJ's UI ( File — New — Project…, then select Flutter). First, we'll make sure that we are inside the folder we want to create the project. For me, that is the default folder that IntellliJ IDEA creates ~/IdeaProjects/. Then I run the following command:
flutter create backgroundThis will start creating a new project called background. You can replace the name background with anything else.
Creating project background......Running "flutter pub get" in background... 2,295ms
Wrote 129 files.All done!
In order to run your application, type:$ cd background
$ flutter runYour application code is in background/lib/main.dart.
To make sure everything's fine we can run:
cd background
flutter run -d chrome