Created by Alexandre Bolot on 16/06/2019
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.
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}')
],
);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,
),
),
)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,
),
);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)// 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)// Used as a simplified reducer method
//
// Useful to simplify chained calls :
// myItems.map((item) => item.price).reduce(sum);
double sum(double a, double b)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(),
);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
);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)),
},
);// 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(),
);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
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);
}Creates a new model Class with useful methods link here
MyClass.fromMap(Map map)allows to create an instance from JSONMap toMap()allows to parse this class as JSON
Allows to easily create a new test class. Nothing more to say, this is not the most useful live template... link here
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 navigationtitle: 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),
),
),
);
}