What is flutter?
- Flutter is a mobile UI framework for creating Native apps for iOS and Android
- Flutter uses a single codebase (dart language) meaning we write once and run on multiple devices.
disclaimer: this is not a write up about dart - I will do that some other time
why flutter?
- again, single codebase
- layout is responsible for web
- smooth and quick experience when running apps
- works out of the box with firebase
- uses Dart - a language that is easy to grasp and understand
- uses Material design right out-of-the box
- amazing documentation
What made it easy for me to pick up flutter?
An understanding of at least one language (mine was javascript and python)
A basic understanding of programming principles:
- classes and constructors
- functions and methods
- variables
- asynchronous code
Tools and hacks
Necessary tools
- Android studio - and android virtual device (emulator)
- git
- xcode - ios simulator
- flutter - installed on your pc or mac
Nice to have
- vscode editor - I will do a write up on all the extensions that have made mine really interesting
- a physical device to test on
other interesting tools...
- DartPad - its an interesting online editor for dart, kinda like jsbin, repl.it and others
- pub.dev - a single repository for flutter packages
- books - books about dart
Overview...
Basic concepts
Widgets
- everything inside a flutter app is basically a widget. the main app root is usually a material widget(root widget) which may contain other widgets such as appBar, container, text, button, row, column, image etc. example
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Avengers'),
centerTitle: true,
backgroundColor: Colors.pinkAccent[400],
),
body: Center(
child: Text(
'Hello avengers!',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'IndieFlower',
letterSpacing: 2.0,
color: Colors.grey[600],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Text('click'),
backgroundColor: Colors.pinkAccent[400],
),
),
));
- widgets are basically classes and have properties and methods associated with them
- widgets can either be:
- Stateless - the state of the widget cannot be changed over time (they can contain data but that data can't change after the widget has been initialized)
- stateful - the state of the widget can change over time.
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}
by using stateless and stateful widgets we are able to use flutter's hot-reload function to perform a hot restart the screen every time we make updates to the widget tree
void main() => runApp(
MaterialApp(
home: Home(),
),
);
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Avengers'),
centerTitle: true,
backgroundColor: Colors.pinkAccent[400],
),
body: Center(
child: Text(
'Hello avengers!!',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'IndieFlower',
letterSpacing: 2.0,
color: Colors.grey[600],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Text('click'),
backgroundColor: Colors.pinkAccent[400],
),
);
}
}
The
@override
function is used to mean that theWidget build(BuildContext context)
will override the inherited functionality extended from the classStatelessWidget
Images
using images in flutter is quite easy. Images can be applied as both
AssetImage
widgets andNetworkImage
widgets.
images can also be displayed withImage.network
for Network images orImage.asset
for Asset images. example below:
Center(
child: Image.asset('assets/space-3.jpg'),
)
Icons and Buttons
flutter uses material icons from the material design library
.
icon
Icon(
Icons.airport_shuttle,
color: Colors.teal,
size: 50.0,
)
button
Center(
child: RaisedButton(
onPressed: () {
// function goes here
},
child: Text('click me'),
),
)
button with icon
RaisedButton.icon(
onPressed: () {
// function goes here
},
icon: Icon(Icons.mail),
label: Text('mail me'),
)
icon button
IconButton(
onPressed: () {},
icon: Icon(Icons.alternate_email),
color: Colors.amber,
)
whats the verdict?
While I may not be able to cover most of the widgets, I suggest you try flutter today.
I only picked up flutter about a month ago and in that period I have been able to build cool and amazing apps.
I believe in learning as I build and I suggest you do the same.
I come from a React and React Native background and I am really excited about the future of flutter.
Liquid error: internal
You can view more of my work on my Github
You can get more materials on some great courses at App Brewery and also on YouTube
so until next time, Have a great time and take care.
Top comments (0)