How we developed the Cinebur App on Flutter: Part II
A deep-dive into the Flutter framework with code examples
Hey, everybody. Adrian here, co-founder & CTO of Cinebur. Today, I’m going to be diving even deeper into the Flutter framework, and even providing some helpful code examples I wish I had when I was starting out. If you missed Part I, feel free to read it here before starting. Otherwise, let’s go for it!
Flutter
Okay, so there are three things to pay attention to: state management, modularity and null point exceptions. The more technically informed audience will know where this is going. Although flutter at this point has begun to see wide scale adoption, it was still a relatively new framework when we started out — where developers are still tinkering, trying to find the best practices and optimal approaches to typical frontend tasks. We’ve shipped over 16 builds to productions at this point, some fixed errors, others introduced new ones, and some exposed errors that we hadn’t initially taken into considerations as we added more and more abilities for the users to interact with the product. Story of a developer’s life, am I right?
I have three pieces of advice for any would-be flutter devs or those thinking of trying out flutter to build out a full project:
- Read the right documentation: Use the “Provider” package from pub.dev for all your state management needs; it is a very flutter way of doing things, which makes it easier to work within the greater context of your program, since it fits your needs in a consistent framework.
- Recycle in your design: Try your best to identify recurring widgets in the design before you set out to code anything. Make those widgets first; then sprinkle them around your application as appropriate. Careful, don’t be afraid to break larger widgets into smaller ones that are parameterized for different situations.
- Safeguard silly mistakes: I’ve been coding for over 6–7 years now in total, so I thought I was past the point of “divide-by-zero” errors or infinity errors — apparently not! Dart (the language behind flutter) is set to introduce null-safety features in an upcoming release 1.24; but until then, make sure you check all your values for the database and try to identify where numerical operations occur in order to add guard rails to prevent errors popping up to your users.
Here are some code snippets to show you what I mean:
Using a Provider for State Management
class Cinebur extends StatelessWidget {
@override
Widget build(BuildContext context) {
final dbService = DatabaseService();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
// Wrap your entire app in a multi-provider for any information that should be globally accessible whether the use is logged in or not
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => UserRepository.instance()),
Provider<DatabaseService>.value(
value: dbService,
),
Provider<PaymentsProvider>(
create: (ctx) => PaymentsProvider(),
),
StreamProvider<List<Venue>>(
create: (ctx) => dbService.getVenues(),
updateShouldNotify: (v1, v2) => true,
),
StreamProvider<List<Movie>>(
create: (ctx) => dbService.getMovies(),
updateShouldNotify: (m1, m2) => true,
),
StreamProvider<List<Event>>(
create: (ctx) => dbService.getCurrentEvents(),
updateShouldNotify: (e1, e2) => true,
),
StreamProvider<List<Review>>(create: (ctx) => dbService.getReviews())
],
builder: (ctx, child) {
// Check the authentication status of the user
// Wrap it in a new provider with their details if they're already logged in to live stream their data
final user = Provider.of<UserRepository>(ctx);
if (user.status == Status.Authenticated) {
return StreamProvider<User>(
create: (ctx) => dbService.getUser(user.user.uid),
updateShouldNotify: (u1, u2) => true,
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Cinebur',
onGenerateRoute: RouteGenerator.generateRoute,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BrowsingPage(
args: ['Welcome back', 'success'],
),
));
} else {
return MaterialApp(
title: 'Cinebur',
onGenerateRoute: RouteGenerator.generateRoute,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BrowsingPage(
args: ['Logged out', 'error'],
),
);
}
},
);
}
}@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final height = mediaQuery.size.height;
final width = mediaQuery.size.width;
final textScaleFactor = mediaQuery.textScaleFactor;
final movies = Provider.of<List<Movie>>(context); //Access the global state without having to pass it down
final venues = Provider.of<List<Venue>>(context);
final events = Provider.of<List<Event>>(context);
final repository = Provider.of<UserRepository>(context);
...
return Scaffold(
...
);
}
Making widgets modular
(This helps if you have normalized your database scheme beforehand.)
One of my favorite widgets is actually the heart button I made, the way it’s designed means it can take any resource (venue, event, movie, production member, review, etc…) and like or unlike it without having to know what the underlying resource is:
import 'package:cinebur/Models/user_model.dart';
import 'package:cinebur/Providers/firestore_provider.dart';
import 'package:cinebur/Providers/user_auth_provider.dart';
import 'package:cinebur/locales/colours.dart';
import 'package:flushbar/flushbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';class HeartButton extends StatefulWidget {
final User user;
final String document;
final double scale;
HeartButton({Key key, this.user, this.document, this.scale})
: super(key: key); @override
_HeartButtonState createState() => _HeartButtonState();
}class _HeartButtonState extends State<HeartButton> {
bool liked = false; void action(BuildContext ctx) async {
if (this.widget.user == null) { // Check is a provider for the user data exists
Flushbar(
flushbarPosition: FlushbarPosition.TOP,
duration: Duration(milliseconds: 2500),
flushbarStyle: FlushbarStyle.FLOATING,
margin: EdgeInsets.all(8),
borderRadius: 8,
message: "Please sign in to activate likes", // Help the user understand why they can't like anything
backgroundGradient:
LinearGradient(colors: [Color(0xffc94b4b), Color(0xff4b134f)]),
)..show(ctx);
return;
}
final DatabaseService db = Provider.of<DatabaseService>(ctx, listen: false);
final String id = this.widget.document.split('/')[1]; HapticFeedback.lightImpact(); // Nice little haptic feedback makes the button feel nice to use if (this.widget.user.likes != null) {
if (this.widget.user.likes.contains(id)) {
await db.unlikeItem(this.widget.user.id, this.widget.document);
} else {
await db.likeItem(this.widget.user.id, this.widget.document);
}
} else {
await db.likeItem(this.widget.user.id, this.widget.document);
}
} @override
Widget build(BuildContext context) {
double heartScale = 1;
if (this.widget.scale != null) heartScale = this.widget.scale;
final DatabaseService db =
Provider.of<DatabaseService>(context, listen: false);
final String id = this.widget.document.split('/')[1];
final repository = Provider.of<UserRepository>(context);
if (repository.status == Status.Authenticated) {
if (this.widget.user.likes != null) {
if (this.widget.user.likes.contains(id)) {
this.liked = true;
} else {
this.liked = false;
}
} else {
this.liked = false;
}
}
return repository.status == Status.Authenticated
? RawMaterialButton(
constraints: BoxConstraints(minWidth: 0, minHeight: 0),
padding: EdgeInsets.all(4),
onPressed: () => action(context),
elevation: 0,
fillColor: CineburColours.cineburDarkBlue,
child: Icon(
this.liked ? Icons.favorite : Icons.favorite_border,
color: this.liked
? CineburColours.cineburPinkSecondary
: Colors.white,
size: 22.5 * heartScale, // Scale parameter to make the heard different sizes
),
shape: CircleBorder(),
)
: RawMaterialButton(
constraints: BoxConstraints(minWidth: 0, minHeight: 0),
padding: EdgeInsets.all(4),
onPressed: () {},
elevation: 0,
fillColor: CineburColours.cineburDarkBlue,
child: Icon(
Icons.favorite_border,
color: Colors.white,
size: 24.0 * heartScale,
),
shape: CircleBorder(),
);
}
}
Checking for mistakes
Don’t forget to check your arithmetic operations!
@override
Widget build(BuildContext context) {
final List<Review> reviews = Provider.of<List<Review>>(context); // Access the provider
double average = 0;
int num_reviews = 0;
if (reviews != null) { // check your nulls! final venueReviews = [...reviews] // Use immutable data updates by unpacking a list into a new one
..retainWhere((element) => element.ref == venue.id);
average = (venueReviews.fold<double>(
0, (previousValue, element) => previousValue + element.rating) /
venueReviews.length);
num_reviews = venueReviews.length; if ((average.isNaN || average.isInfinite)) { // If there are no ratings yet, this is thrown!
average = 0;
} }
User user;
try {
user = Provider.of<User>(context);
} catch (e) {}
return Container(
...
);
}
One last horror story
These pointers aside, a funny story about our initial launch; we managed to get Stripe payments to work on iOS but not on Android, and yet we could only release the app at the time on Android and not iOS — the classic catch 22! We frantically scrambled to fix the problem, already at wits end and having been awake for over 28 hours. Finally, the solution was to roll back to an earlier version of the flutter framework (v 1.16), the issue was related to the plugin registry for the new Android embeddings introduced in later versions. But this situation forced us to think outside the box, which is how we got around to introducing the TypeForm payment pathway which we attached to our website (which we are now beginning to phase out).
As a startup, you have to be able to think on your feet and get the job done. That’s one thing I always appreciated about my co-founder and I; although we may disagree on various topics, when we do come to a conclusion, we work until it’s finished. We’re both extremely results-orientated, which I believe is a big part of Cinebur’s success so far: the ability to execute on the task at hand, and get the job done.
Until next time,
Adrian Coutsoftides
Co-founder & CTO at Cinebur
Let us know if you find these articles helpful in the comments! If there’s a topic you’d like us to cover in Cinebur Tech, we’d love to hear from you.
Check out our next article on RecoilJS + React + Firestore for some more code examples and a simple introduction to React’s new state management library:
