10 Flutter Components Recommended – 4 - flutter技巧

10 Flutter Components Recommended – 4

original

https://tomicriedel.medium.com/10-flutter-tips-season-2-part-2-10-491408453c77

text

Today we're dealing with packages again. We're mostly dealing with packages on databases, so... let's read along!

Hive

Hive is one of the best database packages. As a developer, it offers a lot of possibilities and is very helpful for you. The most important thing to know is that Hive is a NoSQL database. Another very important point is that you have very strong encryption built in. Not many database packages have this feature, which makes Hive even more special. Oh, and forgot to mention: it's well documented. Bottom line: For your next application you need a NoSQL database and Hive should definitely be included! You can learn Hive through Reso Coder or Johannes Milke's tutorials:

sqflite

http://pub.dev/packages/sqflite

It is a database system based on SQLite principle for Android, iOS and macOS. So, simply put, if you want to store data in SQL tables, this is the right package.

You can learn how to use this package with Johannes Milke's tutorial or the Flutter in the Package of the Week series:

Moor

http://pub.dev/packages/moor

Moor is a SQLite-based database system written in Dart and available on any platform. It has many advantages over the well-known sqflite package. However, since it is relatively unknown, it is difficult to find a solution to the problem. You can learn Moor using Reso Coder's series of tutorials:

Flutter Slidable

http://pub.dev/packages/flutter_slidable

Flutter Swipe is a package that allows you to create swipe list items. It's also possible that Flutter doesn't have a package, but this package provides a nice selection of animations. Let's take a look at the animation:

Behind Motion

Behind the scenes

Drawer Motion

drawer movement

Scoll Motion

Stretch Motion \!

Stretching exercises!

Honestly, this already looks pretty good. The good news is that you don't even have to learn a lot to apply this package to your application. You can easily learn how to include these widgets in the README.

Just Audio

http://pub.dev/packages/just_audio

You've always wanted to develop a music app. Then audio is what you want. I think this picture illustrates what this package can do:

In the code samples below, we only focus on how to load an audio file.

 final player = AudioPlayer();  
var duration = await player.setUrl('https://foo.com/bar.mp3');  
var duration = await player.setFilePath('/path/to/file.mp3');  
var duration = await player.setAsset('path/to/asset.mp3');

Agora RTC Engine

https://pub.dev/packages/agora_rtc_engine

Maybe some of you have heard of Agora before, but I'll still explain what you can do with Agora in your application. Maybe you want to develop a communication software with video function or a pure video calling software. You'll run into problems very quickly. It is very difficult to make video calls on your own without other help. That's where Agora comes in. You can easily create video calls with Agora without knowing much about the backend. The whole thing is easy with the agora_rtc_engine package.

Now you must be wondering how to implement this functionality in your application. Tadas Petra made a really nice video about it.

Flutter Typeahead

https://pub.dev/packages/flutter_typeahead

This package provides a simple autocomplete widget for Flutter, which is also not difficult to implement:

 TypeAheadField(  
  textFieldConfiguration: TextFieldConfiguration(  
    autofocus:true,  
    style: DefaultTextStyle.of(context).style.copyWith(  
      fontStyle: FontStyle.italic  
    ),  
    decoration: InputDecoration(  
      border: OutlineInputBorder()  
    )  
  ),  
  suggestionsCallback: (pattern)async {  
returnawait BackendService.getSuggestions(pattern);  
  },  
  itemBuilder: (context, suggestion) {  
return ListTile(  
      leading: Icon(Icons.shopping_cart),  
      title: Text(suggestion['name']),  
      subtitle: Text('${suggestion['price']}'),  
    );  
  },  
  onSuggestionSelected: (suggestion) {  
    Navigator.of(context).push(MaterialPageRoute(  
      builder: (context) => ProductPage(product: suggestion)  
    ));  
  },  
)

Below is an example:

Sliding up panel

https://pub.dev/packages/sliding_up_panel

Sliding up panels make the implementation of SlidingUpPanel easy, here is a good example:

Below is an example of how to implement this panel, you will definitely notice that it is very simple:

 return Scaffold(  
    appBar: AppBar(  
      title: Text("SlidingUpPanelExample"),  
    ),  
    body: SlidingUpPanel(  
      panel: Center(  
        child: Text("This is the sliding Widget"),  
      ),  
      body: Center(  
        child: Text("This is the Widget behind the sliding panel"),  
      ),  
    ),  
  );

Pull to Refresh

https://pub.dev/packages/pull_to_refresh

Program data that can be changed at any time? Or are you building a social media app and just want to refresh the user's feed? Then the pull_to_refresh package should help you.

As you can see, this package has many uses.

The README is very detailed, so you will easily understand how to implement this package.

Convex Bottom Bar

http://pub.dev/packages/convex_bottom_bar

Time to introduce the bottom line again. This time it's a convex bottom bar. With this pack, you can create impressive bottom pubs that are sure to catch the user's eye!

See how many ways there are to achieve this bottom line:

Goodbye and have a nice day!

10 Flutter Components Recommended – 4