“30 Days Of Flutter” with FlutLab: Code Party 8
Many mobile devs already know about Flutter. It’s really popular nowadays. However, some people think: “I’ll try it a little bit later” or “I will wait… It’s too early for me”. If you are one of those, it’s a perfect time to start now.
One of the reasons is Google’s #30DaysOfFlutter initiative. You have a unique opportunity to learn all the key features & elements of Flutter Development during these great times. Firebase is one of the main components of this process. Let’s discover it together!
If you missed our “Code Parties”, don’t worry. You still can pass them
- basic structure of a Flutter app: from “30 Days Of Flutter” with FlutLab: Code Party 1 to “30 Days Of Flutter” with FlutLab: Code Party 3
- Material Design and Material Components: from “30 Days Of Flutter” with FlutLab: Code Party 4 to “30 Days Of Flutter” with FlutLab: Code Party 7
But this is not a problem at all to start your journey from the current “Code Part”.
- Visit https://flutlab.io, the online Flutter IDE.
2. Go to your Profile and press the “New Project” button.
3. Create a new project with “Code Base: Stateful Click Counter”.
4. It will appear in your profile after a second. This project contains a simple Click Counter app. Let’s open it!
5. Press the “Build Project” button. FlutLab will create the Web Build for you.
6. Open the pubspec.yaml file and add a dependency for cloud_firestore.
7. If you’re going to build a project for the Android platform, you’ll need to bump its minSdkVersion to 21. Open the android/app/build.gradle file. Comment or remove minSdkVersion 16 line and replace it with minSdkVersion 21
8. Delete all of the code in main.dart file and replace it with the following (CTRL+S for save):
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
final dummySnapshot = [
{"name": "Filip", "votes": 15},
{"name": "Abraham", "votes": 14},
{"name": "Richard", "votes": 11},
{"name": "Ike", "votes": 10},
{"name": "Justin", "votes": 1},
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Baby Names',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Baby Name Votes')),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
// TODO: get actual snapshot from Cloud Firestore
return _buildList(context, dummySnapshot);
}
Widget _buildList(BuildContext context, List<Map> snapshot) {
return ListView(
padding: const EdgeInsets.only(top: 20.0),
children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);
}
Widget _buildListItem(BuildContext context, Map data) {
final record = Record.fromMap(data);
return Padding(
key: ValueKey(record.name),
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(5.0),
),
child: ListTile(
title: Text(record.name),
trailing: Text(record.votes.toString()),
onTap: () => print(record),
),
),
);
}
}
class Record {
final String name;
final int votes;
final DocumentReference reference;
Record.fromMap(Map<String, dynamic> map, {this.reference})
: assert(map['name'] != null),
assert(map['votes'] != null),
name = map['name'],
votes = map['votes'];
Record.fromSnapshot(DocumentSnapshot snapshot)
: this.fromMap(snapshot.data, reference: snapshot.reference);
@override
String toString() => "Record<$name:$votes>";
}Click the “Build Project” button.
9. Let’s add Firebase!
Go to https://firebase.google.com/ . Sign in or Sign up to your Firebase account. Press the “Create a project” button.
10. Give a name for your Firebase project and click “Continue”.
11. We are not planning to use Analytics, so you can turn it off. Click “Create project” then.
12. Great! Your Firebase project is ready to use. Click “Continue”.
13. We are going to create an app for a web platform. So, click the button with the “Web” tooltip.
14. Enter the name of your app and click “Register app”.
15. Copy this fragment of code and click “Continue to console”.
15. Back to FlutLab. Open theindex.html file. After a <body> tag paste the fragment of code that you’ve copied on a previous step. Add this line too (see the screenshot below):
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
16. We’ve done all settings for the web-based App. If you want to use iOS or Android, use this guide: https://codelabs.developers.google.com/codelabs/flutter-firebase#6
17. What will be the next steps? Follow Google’s “Firebase for Flutter” codelab to create the whole app:
18. The result is impressive! Isn’t it? You can click the “Link to the web view” icon. It’ll open your app in a new tab so you can test it in full-screen mode.
Awesome! You finished the 18th-day of the agenda #30DaysOfFlutter!
If you’ve stacked with some problems, visit FlutLab Widget Bay and find the source code of this challenge under the 30 Days Of Flutter category. You can just fork this Widget Bay project into your FlutLab account and play with it.
Good luck!