erluxman

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.

  1. Add Dependency
dependencies:
  flutter_typeahead: ^version
  1. 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,
),

visit flutter_typeahead

visit demo

autocomplete

#Day93 Read Network State with connectivity package

connectivity package makes it easy to read network state of device.

  1. Add dependency
dependencies:
  connectivity: ^version
  1. 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();
  }
}

visit connectivity package

visit sample gist

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

visit supercharged

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

visit sample

defaulttextstyle

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

visit on pub.dev

flutter_linkify is a Text Widget that automatically finds the URL link in the string and makes it clickable.

  1. Add dependency
dependencies:
  flutter_linkify: ^version
  1. Enjoy
  Linkify(
    text: "My  twitter https://twitter.com/erluxman",
    onOpen: (LinkableElement url) {
      Scaffold.of(context).showSnackBar(
        SnackBar(content: Text("${url.text} clicked")),
      );
    },
  )

linkify visit pacakge

#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.

  1. Add dependency
flutter_spinkit: ^4.1.2+1
  1. Start Using

    • 🔥Type SpinKit and press Ctrl+SPACE to see all possible indicators.

    • Give color (@required), size(optional) and duration(optional) to SpinKit* widgets.
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)

visit flutter_spinkit

spinkit