Flutter Tips 92-98
July 12, 2020 • ☕️ 4 min read
#92 Autocomplete TextField with flutter_typeahead
Autocomplete TextField can be implemented with flutter_typeahead
Package.
- Add Dependency
dependencies:
flutter_typeahead: ^version
- Use
TypeAheadFormField
/TypeAheadField
var platforms = ["Flutter", "Android", "iOS", "Mac", "React", "Cordova"];
final TextEditingController input = TextEditingController();
TypeAheadFormField(
textFieldConfiguration: TextFieldConfiguration(
decoration: InputDecoration(labelText: 'City'),
controller: this.input),
//Search and return found values
suggestionsCallback: (pattern) => platforms.where(
(item) => item.toLowerCase().contains(pattern.toLowerCase()),
),
itemBuilder: (_, item) => ListTile(title: Text(item)),
onSuggestionSelected: (query) => this.input.text = query,
),
#Day93 Read Network State with connectivity
package
connectivity
package makes it easy to read network state of device.
- Add dependency
dependencies:
connectivity: ^version
- Read network states
class State ...{
initState() {
super.initState();
subscription = Connectivity()
.onConnectivityChanged
.listen((ConnectivityResult result) {
if (result == ConnectivityResult.mobile) //mobile connected.
else if (result == ConnectivityResult.wifi) //Wifi Connected.
else if(result == ConnectivityResult.none) //No network
});
}
dispose() {
subscription.cancel();
super.dispose();
}
}
#94 ⚡️ superCharged
⚡️
supercharged
brings awesome utility features from other languages to dart 🎯. making developers life easier.
1. Add Dependency
dependencies:
supercharged: ^1.6.0
2. Have fun 🎉
"#ff00ff".toColor();
"red".toColor();
"flutter is cool".allBefore(" is"); // "flutter"
12.between(0, 30); // true
[1, 2, 3].elementAtOrNull(4); // Don't throw, return null
[1, 2, 3].elementAtOrElse(4, () => 0); //Don't throw, return default value
//Create Pages from list
["a", "b", "c"].chunked(2, fill: () => ""); // [ ["a", "b"], ["c", ""] ]
var duration = 5.minutes + 30.seconds;
duration += 0.5.hours
100.0.tweenTo(200.0); // Tween(begin: 100.0, end: 200.0)
Colors.red.tweenTo(Colors.blue); // ColorTween(...)
//Easy for loop
["dog", "cat"].forEachIndexed((index, value) {
print("$i : $value") // 1 : dog, 2 : cat
});
#95 DefaultTextStyle Widget
We can apply TextStyle to all the widgets in the hirarchy by wrapping it with DefaultTextStyle.
DefaultTextStyle(
child: Column(
children: <Widget>[
Text(
"DefaultTextStyle With Green text color",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, color: Colors.black),
),
Text("Title"), //Green color, size 30
Text("SubTitle", style: TextStyle(fontSize: 25)), //Green color, size 25
Text("Heading", style: TextStyle(fontSize: 20)), //Green color, size 20
],
),
style: TextStyle(fontSize: 30, color: Colors.green),
);
#96 flutter_cache_manager
You can use flutter_cache_manager
to Download and / or
Cache files.
//Get file from Cache and download if not cached already.
File file = await DefaultCacheManager().getSingleFile(url);
//Download File without caching
File file = await DefaultCacheManager().downloadFile(url);
#97 Make link on Text clickable using flutter_linkify
flutter_linkify
is a Text Widget that automatically finds the URL link in the string and makes it clickable.
- Add dependency
dependencies:
flutter_linkify: ^version
- Enjoy
Linkify(
text: "My twitter https://twitter.com/erluxman",
onOpen: (LinkableElement url) {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text("${url.text} clicked")),
);
},
)
#98 Package flutter_spinkit
We need to show loading/progress
in almost every apps, but CircularProgressBar
everywhere is boring.
flutter_spinkit
provides many awesome Progress indictors that we can use.
- Add dependency
flutter_spinkit: ^4.1.2+1
-
Start Using
SpinKitCircle(size: 90, color: Colors.cyan),
SpinKitChasingDots(size: 190, color: Colors.blue),
SpinKitCubeGrid(size: 90, color: Colors.blue),
SpinKitDualRing(size: 90, color: Colors.blue,),
SpinKitFadingCube(size: 90, color: Colors.red),
SpinKitFadingFour(size: 90, color: Colors.green)