10 Flutter Component Recommendations - 2

Today, we recommend the package again. We mostly deal with UI and icon packs, so... let's go and have fun reading!

original

https://tomicriedel.medium.com/10-flutter-tips-part4-10-season-2-260e23214e3f

text

swipe_to

https://pub.dev/packages/swipe_to

Swipe to is a great package if you want to add simple swipe gestures to any gadget. The advantage of this package is that the user doesn't have to click on the action, but the action is executed immediately when swiping.

Here is an example to understand it better:

But...how can I integrate this incredible package into my code?

Well, it's simple:

 SwipeTo(
    child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
        child: text('👈🏿 Swipe me Left | YOU |Swipe me right 👉🏿'),
    ),
    onLeftSwipe: () {.
        print('Callback from Swipe To Left');
    },
    onRightSwipe: () {
        print('Callback from Swipe To Right');
    },
),

Look, it's not difficult at all, right?

rename

https://pub.dev/packages/rename

Of course, you want your app to have a cool name before it's released. But let's face it, the process can be quite painful if you do it manually for each platform.

That's why renaming exists. This package allows you to rename your app on any platform in seconds. Here's how it works:

1. Execute this command on the command line:

 pub global activate rename

2. Now execute these two commands:

 pub global run rename --bundleId com.myDomain.myApp
pub global run rename --appname "MyApp"

The first of these two commands sets your app's BundleId. This is your domain, just reversed. If you don't have a domain name, set it to your name or your company's name. But anyway, it would be advantageous if the domain name was not taken.

The second command correctly renames the application. You'll see this name on your home screen, on iOS and Android or other platforms.

You can change the name however you want.

There are many more possibilities, like renaming an app only for a specific platform.

Hidable

https://pub.dev/packages/hidable

Hidable lets you hide any widget when the user scrolls. This is very useful for a lot of things, so now let's see how to implement this package:

1. First, create a ScrollController.

 final ScrollController scrollController = ScrollController();

2. Now add the scrollController as a controller to the scrollable widget. Here is an example of a ListView:

 ListView.separated(
// General scroll controller which makes bridge between// This ListView and Hidable widget.
  controller: scrollController,
  itemCount: colors.length,
  itemBuilder: (_, i) => container(
     height: 50,
     color: colors[i].withOpacity(.6),
  ),
  separatorBuilder: (_, __) =>const SizedBox(height: 10),
),

3. The third and final step is to wrap any component with a Hidable widget. In the widget, specify scrollController as the controller. Rentable widgets have some additional properties. We now use the AppBar to complete this process.

 Hidable(
  controller: scrollController,
  wOpacity:true,// As default it's true.
  size: 56,// As default it's 56.
  child: BottomNavigationBar(...),
),

That's it. Now you've successfully implemented a rentable gadget!

Flutter Sticky Header

Sometimes you're scrolling through an app and suddenly categories get stuck at the top of the screen, which means you always know where you are. Have you ever wondered how it works in Flutter? isn't it? Well, then read this part anyway because it's very interesting

If you're still reading, I'll show you in detail what I mean:

I think we all know what I mean by now.

But how do I implement this in Flutter? Well, very simple: with flutter/sticky/header package. This package makes it easy to add such a great feature to your application. Let me show you how to implement it in code:

 SliverStickyHeader(
  header: Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: Text(
      'Header #0',
      style:const TextStyle(color: Colors.white),
    ),
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

But there are other ways to achieve something similar like using sliversticheader.builder.

Preload Page View

Everyone knows PageViews. They're so handy that you can even find them on TikTok (if it's built with Flutter). But what if you have content from the server on the PageView. When the user enters a page, it takes a long time to load the content, which is not good. This problem is solved by preloading \_ page views. As the name says, you can use this package to preload any number of pages so you don't have eternal loading screens. The implementation of this widget is very simple and works almost like a normal PageView widget:

 @override
  Widget build(BuildContext context) {
    return new PreloadPageView.builder(
      itemCount: ..,
      itemBuilder: ..,
      onPageChanged: { (int position) { ...},
      .....
      preloadPagesCount: 3,
      controller: PreloadPageController(),
    );
  }

It's actually not that difficult.

Phosphor Icons

http://phosphoricons.com/

As mentioned at the beginning, we certainly want to talk about the icon library. Trust me, this icon library is amazing. In my opinion, these are by far the best icons I've seen. Best of all, phosphoricons.com has 5,364 icons in various variations.

Of course, this is just a screenshot of the website.

https://pub.dev/packages/phosphor_flutter

But... what does this whole thing have to do with Flutter now? There is an officially supported Flutter package that includes all the phosphorus icons.

Implementing icons in Flutter is very simple:

 Icon(
  PhosphorIcons.pencil,// Pencil Icon
),

That's it, now you have a nice pencil icon in your app.

Sliding Clipped Nav Bar

https://pub.dev/packages/sliding_clipped_nav_bar

It's pretty much a ritual so far, and I've come up with my 10 Flutter Tips article for navigating the Pub package. Today's article mentions the sliding slider navigation bar. This package gives you a great way to make your app more interesting to users. It is one of the best navigation Pub packs due to its incredibly simple execution and beautiful design.

But... enough said, what does the navbar and this wrapper look like?

I think you know exactly why I like this package so much. There are so many customization possibilities and the implementation is very simple:

 return Scaffold(
      body: PageView(
      physics: NeverScrollableScrollPhysics(),
      controller: controller,
...
      ),
      bottomNavigationBar: SlidingClippedNavBar(
        backgroundColor: Colors.white,
        onButtonPressed: (index) {
          setState(() {
            selectedIndex = index;
          });
          controller.animateToPage(selectedIndex,
              duration:const Duration(milliseconds: 400),
              curve: Curves.easeOutQuad);
        },
        iconSize: 30,
        activeColor: Color(0xFF01579B),
        selectedIndex: selectedIndex,
        barItems: [
          BarItem(
            icon: Icons.event,
            title: 'Events',
          ),
          BarItem(
            icon: Icons.search_rounded,
            title: 'Search',
          ),
/// Add more BarItem if you want
        ],
      ),
    );

Yes, that's it. You don't need to do anything else. The README file for this package is very detailed, making it very easy to get started with the package.

Battery plus

https://pub.dev/packages/battery_plus

Battery_plus is a package supported by the Flutter community that provides various information about battery status. It is very easy to use and can be used in many applications:

 // Import package
import 'package:battery_plus/battery_plus.dart';
// Instantiate it
var battery = Battery();
// Access current battery level
print(await battery.batteryLevel);
// Be informed when the state (full, charging, discharging) changes
battery.onBatteryStateChanged.listen((BatteryState state) {
// Do something with new state
});

Freezed

http://pub.dev/packages/freezed

Maybe you've heard that the package is frozen, but if not, I'll explain it to you now (because it's so useful).

Now let's assume you have created a data class in Flutter. As you may have noticed, there is a ton of boiler code here, and it's unpleasant to look at. That's why Freeze was created. Using this package, you can create data classes with many possibilities with very little boilerplate code.

I won't show you how to implement Freezed here, but the README file is great.

end.

Have a nice day!

---

© Cat Brother

• WeChat ducafecat
• Blogducafecat.tech
• github
• bilibili