Flutter — It’s Easy to Get Started
Since Javascript evolved very well, we have met hybrid mobile application frameworks such as Ionic using Angular. Then React Native and NativeScript got on the stage, which let you make native mobile apps without Java or Swift knowledge.
Ionic was godlike invention at the beginning but React Native took over it quickly. Then Telerik introduced NativeScript but it didn’t make a big impact in my opinion.
Could we build mobile apps without these options? Hell yeah! This article will lead you to build your first Flutter application (if you have not already 😝).
Flutter is Google’s new alpha project that allows you to build native applications. Because of Flutter is an alpha project, it’s not suggested for production development.(but who cares? ¯\_(ツ)_/¯)
Goal: Shopping list application with Flutter & Firebase.
What You Need Installed
Flutter: Install flutter from this link. Don’t forget to follow installation steps, also install the plugins. They can be pain in the ass if you skip 🙃
Xcode: If you’re on a Mac, you will need Xcode, which you can get from the app store here. You also need Xcode to develop iOS side of your Flutter app.
Android Studio: You definitely need this to do develop Android side of your Flutter app. Get it from here.
IDE: I’ve been using VSCode as my main text editor and there are Flutter & Dart plugins for it but I highly recommend Intellij IDEA for Flutter development. It has complete tools to develop a Flutter app. So get it from here.
Getting the Sample App Running
Start the IDE and click on Create New Project then select Flutter from the left.
As I said before, if you skipped the installation steps, you may not be able to see Flutter option. So go back 💀
For those who took my advice, let’s roll on!
Fill the rest of stuff as you wish.
Java option is default for Android language, but I switched iOS language to Swift because I have no idea about Objective-C so it’s your decision to make.
Now you are ready with skeleton application. Kindly remove all the comment lines because I don’t find them useful. Also remove floatingActionButton, body content and _incrementCounter method.
Let’s Create the Interface
Create a new final string in the class and replace title of Material App and home widget title. I also changed application’s color swatch to red. I like it !
In _MyHomePageState, create a final TextEditingController, which is a controller for editable text field.
final TextEditingController _textController = new TextEditingController();then create _handleSubmitted method to do amazing things with user input
void _handleSubmitted(String text){
}and as final, add this code to create input container at the bottom.
Widget _createInputContainer() {
return new Container(
margin: const EdgeInsets.symmetric(horizontal: 16.0),
child: new Row(
children: <Widget>[
new Flexible(
child: new TextField(
controller: _textController,
onSubmitted: _handleSubmitted,
decoration: new InputDecoration.collapsed(
hintText: "Add something"),
),
),
new Container(
child: new IconButton(
color: Colors.red,
icon: new Icon(Icons.list),
onPressed: (){}),
),
new Container(
child: new IconButton(
color: Colors.red,
icon: new Icon(Icons.send),
onPressed: (){}),
),
],
),
);
}We are doing good so far !! 😅 We created a container for input element, list button and submit kinda button. onPressed functions are empty for now, we will work on it later.
Now let’s go back to body of our Scaffold. Edit the body code as this:
body: new Column(
children: <Widget>[
new Flexible(
child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
reverse: false,
itemBuilder: (_, int index) => null,
itemCount: 1,
),
),
new Divider(height: 1.0),
new Container(
decoration: new BoxDecoration(
color: Theme.of(context).cardColor),
child: _createInputContainer(),
),
],
)Alright, now body is almost ready. We have a list, a divider between list items and our input elements. As you can see I used _createInputContainer() widget as child of a container. It’s a nice way to keep your code clean and organized.
I believe you all are good till this point 😜
Well honestly this is my first tutorial ever so I am kinda excited. I am not sure if my way of tutoring is understandable but I believe it is 💪
Let’s Talk About the Things To Do 😉
- Create inside of _handleSubmitted method.
- Add submitted text as new list item and display them.
- Make our list user friendly interactive list.
- Add Firebase database to the project.
Let’s Roll On!
If we think about an ordinary application which handles user input, first thing that pops up in the mind is clear the input after submit 😛
void _handleSubmitted(String newItem){
_textController.clear();
}and modify the send button as
new Container(
child: new IconButton(
color: Colors.red,
icon: new Icon(Icons.send),
onPressed: (){
_handleSubmitted(_textController.text) //modify this
}),
),now users are able to submit the input, and application can handle the input, basically clears the input area after submit.
Now we will create a Widget that displays list items. First we have to create a widget that represents single item. Let’s create a StatelessWidget and name it ListItem and put it outside of _MyHomePageState.
class ListItem extends StatelessWidget {
ListItem({this.itemName});
final String itemName;
@override
Widget build(BuildContext context) {
return new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
);
}}
In a new Container, we set symmetrical vertical margin with value of 10.0 because otherwise list items would look too close to each other. We want some cool shit huh ? 😎 Don’t worry we will add more styling later.
Then as child element we will add a Row widget that displays its children in a horizontal array.
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start, //its nice ;)
children: <Widget>[
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: new Text(itemName), //this is item name
),
],
),
],
),Well, entire code for this ListItem widget looks like this:
class ListItem extends StatelessWidget {
ListItem({this.itemName});
final String itemName;
@override
Widget build(BuildContext context) {
return new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Flexible(
new Column(
crossAxisAlignment:CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: new Text(itemName),
),
),
],
),
],
),
);
}
}Alright, now let’s go back to the _MyHomePageState, add this line
final List<ListItem> _shopItems = <ListItem>[];For now we will hold shopping list items in a List widget. I know after exiting the application, this list will be empty again, that’s why we have Firebase on our to do list 😏
Our lovely _handleSubmitted method is waiting for us. It needs some attention at this point.
void _handleSubmitted(String newItem){
_textController.clear();
if(newItem.trim().length > 0){
ListItem listItem = new ListItem(
itemName: newItem, //Initialize our ListItem widget and assign user's input as instance value.
);
setState(() {
_shopItems.insert(0, listItem);
});
//Notify the framework that the internal state of this object has changed.
}
}And as a final step of this part, go to the ListView in body of our main widget
child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
reverse: false,
itemBuilder: (_, int index) => _shopItems[index], //modify this
itemCount: _shopItems.length, // modify this
),Before this modification, we had itemBuilder’s function body as null. We modified it to build list item on given index of _shopItems, and we changed itemCount to length of _shopItems.
Let’s try this live:
I’ve just realized I only used iPhone X to test the application. Here is Google Pixel 2 XL snapshot from the app. It looks damn cool 😎
I guess everything is working very well except whenever I add a new item, new item is being added to top. I will figure it out while working on other stuff 😁
I want to give a break on this article here, because I don’t want readers get bored by doing everything in one tutorial. I believe we have done some nice stuff till here 🙌
In the next article, we will implement date/time, delete item, set item done, Firebase database and specified shopping lists like bathroom stuff or kitchen stuff. It will be fun and you have my word for this 😁
As I mentioned before, this is my first tutorial ever so please tell me your reviews and recommendations about it. I would love to hear my strong or weak sides of writing a tutorial and I will improve myself for sure !!
While reading and applying the tutorial, if you face any problems with my code or your code, feel free to contact me and I will try my best to assist you.
