I took [Flutter](https://flutter.io) for a round for the first time and I enjoyed every moment of it. Well, the syntax was different for me, but still liked it a lot. Here are my thoughts about my first experience with Flutter.

### Installation

I work with MacOS, so I started with the [Get Started: Install on macOS](https://flutter.io/setup-macos/) page. Just download the zipped sdk and add it to your `PATH`.

I ran the `flutter doctor` command to check that everything was OK. I had some issues like install flutter plugin on Android Studio. I installed the plugin and saw this (woo hoo):

![](https://hackernoon.com/hn-images/1*MqCYt-C-dH1KPbmPwX1C8Q.png)

The next step was to [configure my editor](https://flutter.io/get-started/editor/#androidstudio), in this case Android Studio. Only few clicks and I had the flutter and dart plugins installed on my editor. Easy peasy.

![](https://hackernoon.com/hn-images/1*FDPh9iP2M6XgyRzDEytKCQ.gif)

### Get Started

Let’s write some code, or at least run it.

The first step of the [getting started step](https://flutter.io/get-started/test-drive/#androidstudio) is to create a new flutter project in Android Studio and run it. Everything worked like the docs said, profit!

### Coding

Awe yeah! Coding is here.

The goal of the [code lab](https://flutter.io/get-started/codelab/) was to achieve infinite scrolling ListView app, called: _Startup Name Generator._ Something like this:

![](https://hackernoon.com/hn-images/1*65_wbm01gkeSu6LSwJA2DQ.gif)

Gif by https://flutter.io

This tutorial was very informative and I learned how to build a layout; how to use an external package and the difference between StatelessWidget and StatefulWidget.

At the end of the tutorial, there was a summary of what was achieved and if I wanted to continue (yes, please), and a little teaser:

![](https://hackernoon.com/hn-images/1*CdEUhTlFqB2bezkUFszOvw.png)

Gif by [https://flutter.io](https://flutter.io)

I clicked on [part 2](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0). The mission was to add a favorite icon and a navigation for the favorite names.

The first 3 steps are building the environment, so you can skip them if you did these in part 1. I learned app hot reloading, navigation (Flutter has it out of the box) and how to add icons from the flutter material design.

![](https://hackernoon.com/hn-images/1*cznnK8iXloAAKWxvijfrBA.png)

Screenshot by [https://flutter.io](https://flutter.io)

The [last step](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#8) of this tutorial contained a few links for further tutorials and knowledge-bases, but I was too eager to try something out and google the things I needed.

### My first Flutter project

When I’m testing a new mobile framework or language, I like to build a simple reddit app. Fetch hot topics, see some posts and read and comment. It’s a good practice, since it combines http call, parsing objects, navigation and webview. You can see the examples on my Github, written in [Kotlin](https://github.com/yershalom/check-the-idle) and in [React Native](https://github.com/yershalom/reddit_react_native).

> Don’t change a winning team

So I didn’t. I wrote a new simple reddit app with flutter. I googled how to stuff and I had my first screens:

![](https://hackernoon.com/hn-images/1*qlERJDxYzbHg0MyMJ9QyWQ.jpeg)

![](https://hackernoon.com/hn-images/1*WDDQshtLwjjz79ui5JXdtw.jpeg)

![](https://hackernoon.com/hn-images/1*7zZ7VIIvKVLGWGjkfNi25A.jpeg)

TopicsScreen, PostsScreen and open link using ChromeCustomTabs package

So far, so good. But I wanted to test more Flutter’s features. I decided to add a [Bottom Navigation Bar](https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html). I built another screen using the [SpaceX API](https://github.com/r-spacex/SpaceX-API) and created a list of history SpaceX launches.

![](https://hackernoon.com/hn-images/1*3OrtxGEMo_Xt9H15Lih5rQ.png)

Simple ListView with cards, containing the mission name, mission patch and success or failure.

I wanted to try image handling and camera access.

![](https://hackernoon.com/hn-images/1*LfDkcw2Kj_TQg9f8vlCEvw.png)

I added another screen called Picky. I added `add a photo` icon on the app bar for adding a picture, and two rotate icons for rotating the image.

To sum it up, I love Flutter. The Flutter plugin for Android Studio is more than amazing, letting you build both iOS and Android. More than amazing.

![](https://hackernoon.com/hn-images/1*7plC1gNEoK8efuKV_Wf99Q.gif)

From my [Github](https://github.com/yershalom/reddit_flutter)

You can grab the source code from here: [https://github.com/yershalom/reddit\_flutter](https://github.com/yershalom/reddit_flutter)

Hope you like it! If so, you can follow me on [Twitter](https://twitter.com/yershalom).

Fetch

Google

Twitter

Read My Stories

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

I love you Flutter

Too Long; Didn't Read

Companies Mentioned

@yershalom

RELATED STORIES