flutter_stash 1.2.1-nullsafety

I created this Flutter package to gather Widgets, Views and methods that I frequently use between projects.

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}')
  ],
);

---

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,
    ),
  ),
)

---

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,
  ),
);

---

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)

// 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)

---

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(),
);

---

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
);

---

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)),
  },
);

---

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(),
);

---

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);
}

---

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),
      ),
    ),
  );
}