A new Flutter application for women who code cincinnati

A new Flutter application for women who code cincinnati

flutter_app A new Flutter application for women who code cincinnati

flutter_app

A new Flutter application for women who code cincinnati

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Installing Flutter

Helpful tips and tricks to get ready to contibute to our flutter project.

While the official Flutter installation guide technically has everything you need, here are some more explicit directions and trouble shooting to make it as easy as possible.

Some assumptions I'm making: that you have git installed and understanding cloning. Not the case? That's okay - check out this beginner friendly tutorial from our meeting last month to get started.

A couple helpful hints before we get started, it would be helpful to put everything in one place. I have one "Development" folder where all these things (and my other projects live). If you you're excited to build more things, it might be helpful to make your own "Development" folder to keep all your git repos in one place. If you're not sure yet, I would recommend making a "WWCode" folder to hold everything we do here (and maybe our Gatsby site and our database).

Step One - Install Android Studio 4.1 (or use IntelliJ ** )

You might notice this is a different step one than the install guide but bare with me.

Two major reason we're using Android Studio (or IntelliJ), these tools are available on all operating systems so we can all be looking at the same thing AND I use them regularly and so I can help troubleshoot if you run into problem.

Download Android Studio here.

This is a doozey of a step and will take some time. It might be useful to have it done before the event so you can clone the project and have it opened to follow along but not eveyrone learns that way. It's totally okay if you have not downloaded it before the event - we'll offer a quick reminder to start the process when we kick off but you can also just hang out and watch and do it later in your own free time.

** IntelliJ also has Flutter and Dart support so if you already have IntelliJ and would prefer to use that you can skip this step.

You can also download Xcode if you're interested in running it on an iPhone but spoiler: this is also a long process so prepare yourself. It will not be used on Saturday!

Step Two - Start Android Studio and go through the Setup Wizard.

This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android. (:

Step Three - Open your Terminal

Okay so the reason that we installed AS first is that no we can all use the same terminal - AS has a terminal built into the IDE (so does IntelliJ) and Flutter installation requires a terminal.

Where to find your terminal - along the bottom of the IDE you should see some tabs and one should be terminal. If it's not there, you can also add it by going view -> tool window -> terminal.

PS - you may need to open a project to make the full IDE open. AS is still a IDE so you can open something as imple as txt file and be good to go.

Step Four - Actual Flutter things

Now we can jump back to the start of the installation guide.

So now we're in our teminal and specifically we want to be in our "Development" directory

To navigate in the teminal, you can use cd - to go up one folder use cd .. and to go into a folder use cd FolderName/ (tab will help you autofill names as well). To see where you are in your folder system use pwd

In "Development", we want to clone flutter so run the command: git clone https://github.com/flutter/flutter.git -b stable

Then you can add flutter to your path so that you can use flutter commands: export PATH="$PATH:pwd/flutter/bin" ^^ This will only set your PATH variable for the current terminal window. You can also permanently add Flutter to your path following the macOS directions or windows directions or the other install directions.

Now (still in your current terminal), run flutter doctor - two important things should happen

  • one, it should work and you should see output (and NOT something about command not recognized)
  • two, you should see some errors because we haven't finished

Example:

[email protected] ~ % flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.1, on Mac OS X 10.15.6 19G73, locale en-US)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[✓] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2020.2.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.49.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

Better install some plugins then..

Step Five - Add Plugins

You'll need install the Flutter and Dart Plugins to Android Studio (or IntelliJ). How to do this from the menu bar: Android Studio -> preferences -> Plugins -> Marketplace -> search for and install Dart and Flutter (After the installation, you should be prompted to restart AS).

Boom you're done - Android Studio is set up and ready for some Flutter development!

Where's my Dart SDK? /Path/to/Maybe/Development/flutter/bin/cache/dart-sdk Where you'll need to replace the beginning of the path with where you actually cloned Flutter.

Side note - I learned today that flutter doctor might not actually reflect that these plugins were installed. It checks a very specific regex pattern for where it expects things to be and if anything is askew, it will continue to give warnings. Don't worry if this happens.

It also might yell at you because you haven't installed / set up xcode but ¯(ツ)/¯ we don't need it for this.

Step Six - it might be helpful to make an Emulator to build this on

You can definitely build it on your phone if you're comfortable putting your Android device in developer mode. To install to an iPhone, you'll need xcode installed and set up AND an apple developer account to install to a physical device (I think).

To make a new emulator, you'll need to open your AVD (Android Virtual Device) Manager - this is an icon along the top that looks like an outline of a phone with a little android logo at the bottom. Then + Create Virtual Device.... It iwll walk you through the steps of everything you need to download to make a new device - you'll have to pick a phone (I usually pick a Pixel) and then select a system image (API 30 is the latest - you'll probably have to download this first) and then you can name and create it. Now you'll be able to run the app on your new virtual device!

Final notes

I recommend putting all of your projects for this event in the same folder - whether that be your development folder or something you made just for today! So when it comes time to fork the flutter app, run the command from the same directory where you cloned flutter.

Many thanks to Erica for helping me find pain points to setting up Flutter from scratch!

Download Details:

Author: WomenWhoCodeCincy

Source Code: https://github.com/WomenWhoCodeCincy/flutter-starter-app

flutter dart mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

Top 25 Flutter Mobile App Templates in 2020

Flutter has been booming worldwide from the past few years. While there are many popular mobile app development technologies out there, Flutter has managed to leave its mark in the mobile application development world. In this article, we’ve curated the best Flutter app templates available on the market as of July 2020.

Flutter App Development Trends 2020

As the new decade dawns upon us, a slew of technologies has been making a lot of noise to grab the developers’ attention. While native app development is going strong, the trade winds are now blowing towards going cross-platform.

How To Succeed In Mobile App Wireframe Design?

This article covers everything about mobile app wireframe design: what to do and what not, tools used in designing a mobile or web app wireframe, and more.

What is Flutter and why you should learn it?

Flutter is an open-source UI toolkit for mobile developers, so they can use it to build native-looking Android and iOS applications from the same code base for both platforms. Flutter is also working to make Flutter apps for Web, PWA (progressive Web-App) and Desktop platform (Windows,macOS,Linux).