Create Nothing app with flutter

Parth Jansari
GDG Gandhinagar
Published in
4 min readDec 4, 2017

--

note: this app will do absolutely nothing (shh….. it’s a hello world app) & YOU NEED TO HAVE A WORKING SETUP OF ANDROID STUDIO

Hats off Chilango Labs(no one is sponsoring this post)for coming up with this crazy idea please try there app https://play.google.com/store/apps/details?id=com.gorro.nothing&hl=en

Github Repo for this app: https://github.com/parth181195/flutter-nothing-app

First Steps — 5 min Setup

Clone repo and add to $PATH:

$ git clone -b alpha https://github.com/flutter/flutter.git

Run flutter doctor

$ flutter doctor

Creating your nothing Flutter app

$ flutter create nothing

run your nothing app

$ cd nothing
$ flutter run

if you want to reload whole app Press shift+r(R) and to hot reload press r in terminal.

We are all set for development in flutter

your project folder must be looking like this

inside lib folder and you will find a main.dart this is the file where all our code will go.
first, we need to clear all the code in main.dart and start with an empty file.
first, we need to import material package from flutter

then we will create a function which will initialize our app

but at this point in time, your IDE must be going crazy on what the hack is HomePage.it will show error cause we haven’t created HomePage class.

now let’s declare HomePage class

there we go we have our nothing app ready. even if you just copy pasted the whole thing your app must be looking like this. now let’s understand individual components from code.

what’s in code!!!

on line 1 you can see we have imported the package:flutter/material.dart this package contains all Flutter widgets implementing Material Design.

after that, we declare a function called run app, inside the main function.now hears where the things get more interesting inside run app we pass a class called MaterialApp which contains Flutter widgets implementing Material Design. Then we set HomePage class as the home of our app. inside our homepage class we will override class for our build method inside build method we will pass BuildContext context and we will return a scaffold class which provides us with This class provides APIs for showing drawers, snack bars, and bottom sheets. then we will pass a new center widget as body. now you must be wondering what is a widget.

Widget

Widgets are the basic building blocks of a Flutter app’s user interface. Each widget is an immutable declaration of part of the user interface. Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.

A widget can define:

  • a structural element (like a button or menu)
  • a stylistic element (like a font or color scheme)
  • an aspect of layout (like padding)
  • and so on…

and as child of center we will pass Text widget an s we are done with coding our center app. now we are done with coding part of our app you can now set app icon by using image provided bellow you if you want to generate different icon sizes use this service(it’s free): https://makeappicon.com/

android icon will go to projectdir/android\app\src\main\res

ios icon will go to projectdirios\Runner\Assets.xcassets\AppIcon.appiconset

you need to create a JSON file of ios which contains image details as array inside

{
“images” : [
{
“size” : “20x20”,“idiom” : “iphone”,“filename” : “Icon-App-20x20@2x.png”,“scale” : “2x”}
]
}

--

--