flutter_stash

Description:

flutter stash

Flutter Stash #

Created by Alexandre Bolot on 16/06/2019

Table of contents #

Project objectives
Content

Flutter content

SplashScreen
BubbleLoader
TooltipText
Shared
FutureWidget
LiquidLoader
SwitchWidget
DropDownList


Live Templates

doc
model
testclass
view





Project objectives #
I created this Flutter-package to gather Widgets, Views and methods that I frequently use between projects.
The final objective is to be able to share those classes, accept calsses from others (via pull-requests), in order to reduce code duplicates, endless copy-pasting between previous and new projects, and a much better maintenance.
Content #
Flutter content #
SplashScreen
This widget is used as a dynamic front page before the home page is displayed.
It allows you to perform synchronous and asynchronous tasks before automatically navigation to the home page.
The following example shows how to build a SplashScreen for an app called MyApp, perform basic asynchronous tasks (loading user preferences, obtaining a user token, etc), and then navigating to another widget page called HomePage.
//Example :
SplashScreen(
title: 'Welcome to MyApp',
nextRouteName: '/HomePage',
loadFunctions: [
() => print('started loading stuff'),
() async => await loadUserPreferences(),
() async => await getUserTokenFromServer(),
() => print('ready to go, token : ${user.token}')
],
);

_____________________________________________

SplashScreen(
title: 'Welcome to MyApp',
nextRoute: MaterialPageRoute(builder: (context)=> HomePage()),
loadFunctions = [
() => print('started loading stuff'),
() async => await loadUserPreferences(),
() async => await getUserTokenFromServer(),
() => print('ready to go, token : ${user.token}')
],
);
copied to clipboard

BubbleLoader
This stateful widget is used as a custom CircularProgressIndicator
It's composed of 12 bubbles with decreasing radius, forming a circle. They simply turn in rounds until this widget is disposed.
It has only a default constructor so no parameters are needed.
Yet, I recommend to always use it in a container with a well defined height or width.
//Example :

Container(
width: double.infinity,
height: 250.0,
child: Center(
child: Container(
child: loader,
),
),
)
copied to clipboard

TooltipText
Simple widget used to add a Tooltip to a Text widget
This allows the user to display a tooltip message when applying a long-press on the displayed text widget.
// Example :
TooltipText(
text: 'This is the main displayed text',
tooltip: 'Useful information',
);

_____________________________________________

TooltipText(
text: 'This is the main displayed text',
tooltip: 'Useful information',
textAlign: TextAlign.center,
style: TextStyle(
fontsize: 18.0,
fontWeight: FontWeight.bold,
),
);
copied to clipboard

Shared
The shared.dart file gathers methods for global use across your projet.
// Returns the adequate text color to contrast
// with a given [background] Color
Color contrastOf(Color background)
copied to clipboard
// Formats a given [string] to used a 'sentence' format
//
// UPPER CASE PHRASE -> Upper case phrase
// lower case phrase -> Lower case phrase
// Mixed CASE phrase -> Mixed case phrase
String toFirstUpper(String string)
copied to clipboard
// Used as a simplified reducer method
//
// Useful to simplify chained calls :
// myItems.map((item) => item.price).reduce(sum);

double sum(double a, double b)
copied to clipboard

FutureWidget
Wrapper around a FutureBuilder
// Example :
FutureWidget(
future: _myFutureText,
buider: (value) {
return Text(value),
},
);

_____________________________________________

FutureWidget<String>(
future: _myFutureText,
initialData : 'temporaryText',
buider: (String value) {
return Text(value),
},
loader: CircularProgressIndicator(),
);
copied to clipboard

LiquidLoader
Wrapper around a LiquidCircularProgressIndicator to make it auto-animated
// Example :
LiquidLoader();

_____________________________________________

LiquidLoader(
text: 'Loading...',
maxHeight: 50.0,
maxWidth: 50.0,
backgroundColor: Colors.white,
borderColor: Colors.blue,
borderWidth: 2.0
);
copied to clipboard

SwitchWidget
Allows you to use a switch between widget based on a give value.
The type is dynamic so you can use any of your choice
// Example :
SwitchWidget(
value: 'Hello',
cases: {
'Hello': Text('Hello World', style: TextStyle(color: Colors.greenAccent)),
'Bye': Text('See you soon', style: TextStyle(color: Colors.redAccent)),
},
);
copied to clipboard

DropDownList #
// Example :

DropDownList(
values: ['option 1', 'option 2', 'option 3'],
value: 'option 1',
elevation: 4,
hint: Text('Select an option'),
isDense: true,
onSelect: (value) => print('User selected $value'),
itemBuilder: (context, values) => values.map((value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
selectedItemBuilder: (context, values) => values.map((value) {
return Center(child: Text(value));
}).toList(),
);
copied to clipboard

Live Templates #
On this package's github page I also share Live Templates, which are not directly code, but can be used as code-snippets to create code skelettons faster.
They can be used by IDEs, for example JetBrains IDEs such as Android Studio or IntelliJ.
To add them, go to Settings > Editor > Live Templates
doc
Creates a Dart documentation pattern, link here
/// <br>
/// Returns the [n] first characters of a given [string]
///
/// * [n] - Number of characters to return
/// * [string] - String value to extract the characters from
///
String extract(int n, String string){
return string.substring(0, n);
}
copied to clipboard

model
Creates a new model Class with useful methods link here

MyClass.fromMap(Map map) allows to create an instance from JSON
Map toMap() allows to parse this class as JSON


testclass
Allows to easily create a new test class.
Nothing more to say, this is not the most useful live template... link here

view
Most likely the Live Template I use the most, even more when starting a new Flutter Application !
Creates a new flutter page view link here
The name given to the Widget will automatically fill :

routeName: used for easier access from Named-Routes navigation
title: text displayed as title of this view (in the appbar)

By default a page view displays a Scaffold containing a centered text, with the page's name in it.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Container (
child : Center (
child : Text(widget.title),
),
),
);
}

copied to clipboard