关于flutter:10-个-Flutter-组件推荐-2

38次阅读

共计 4682 个字符，预计需要花费 12 分钟才能阅读完成。

明天，咱们再次举荐 package。咱们次要解决用户界面和图标包，所以 … 让咱们去和欢快的浏览！

原文

https://tomicriedel.medium.co…

注释

swipe_to

https://pub.dev/packages/swip…

如果你想给任何小工具增加简略的滑动手势，滑动到是一个很好的软件包。这个软件包的长处是用户不用点击动作，然而当滑动时动作会立刻执行。

这里有一个例子能够更好地了解它:

然而 … … 我怎样才能将这个令人难以置信的包集成到我的代码中呢？

好吧，这很简略:

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

看，一点都不难，对吧？

rename

https://pub.dev/packages/rename

当然，你心愿你的应用程序在公布之前有一个很酷的名字。然而，让咱们面对现实吧，如果您为每个平台手动执行这个过程，那么这个过程可能会十分苦楚。

这就是为什么存在着重命名。这个包容许你在几秒钟外在任何平台上重命名你的应用程序。以下是它的工作原理:

  1. 在命令行中执行这个命令:
pub global activate rename
  1. 当初执行这两个命令:
pub global run rename --bundleId com.myDomain.myApp
pub global run rename --appname "MyApp"

这两个命令的第一个设置你的应用程序的 BundleId。这是你的畛域，只不过是倒过去的。如果你没有域名，把它设置成你的名字或者你公司的名字。但无论如何，如果这个域名没有被占用，那将是无利的。

第二个命令正确地重命名应用程序。你会在你的主屏幕上看到这个名字，在 iOS 和 Android 或者其余平台上。

你能够得心应手地更改名字。

还有更多的可能性，比方只为一个特定的平台重命名一个应用程序。

Hidable

https://pub.dev/packages/hidable

Hidable 能够让你在用户滚动时暗藏任何窗口小部件。这对于很多事件都是十分有用的，所以当初咱们来看看如何实现这个包:

  1. 首先，创立一个 ScrollController。
final ScrollController scrollController = ScrollController();

2。当初将 scrollController 作为控制器增加到可滚动的小部件中。上面是一个 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。第三步，也是最初一步，用 Hidable widget 包装任何组件。在小部件中，指定 scrollController 作为控制器。可租用小部件还有一些其余属性。咱们当初应用 AppBar 来实现这个过程。

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

就是这样。当初你曾经胜利地实现了可租用小工具！

Flutter Sticky Header

有时候你在应用程序中滚动，而后忽然间类别卡在屏幕顶部，这意味着你总是晓得你在哪里。你有没有想过在 Flutter 是怎么工作的？不是吗？好吧，那么无论如何还是浏览这一部分，因为它十分乏味

如果你还在读，我会给你具体展现我的意思:

我想咱们当初都晓得我的意思了。

然而我如何在 Flutter 中实现这个呢？嗯，非常简单: 带有 flutter/sticky/header 包。这个软件包能够很容易地为你的应用程序增加这样一个平凡的性能。让我来通知你如何在代码中实现它:

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

然而还有其余办法能够实现相似的货色，比方应用 sliversticheader.builder。

Preload Page View

每个人都晓得 PageViews。它们十分不便，甚至能够在 TikTok 上找到 (如果它是用 Flutter 建造的)。然而如果你在 PageView 上有来自服务器的内容呢。当用户进入一个页面后，加载的内容却要花费很长的工夫，这是不好的。这个问题通过预加载 \_ 页面视图来解决。正如它的名字所说，你能够应用这个包来预加载任意数量的页面，这样你就不会有永恒的加载屏幕。这个小部件的实现非常简单，工作原理简直和个别的 PageView 小部件一样:

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

其实也没那么难。

Phosphor Icons

http://phosphoricons.com/

正如结尾提到的，咱们当然想谈谈图标库。置信我，这个图标图书馆真是太棒了。在我看来，这些是迄今为止我见过的最好的图标。最棒的是，phosphoricons.com 上有 5364 个图标，有各种各样的变动。

当然，这只是网站的一个截图。

https://pub.dev/packages/phos…

然而 … 这整件事和 Flutter 当初有什么关系？有一个官网反对的 Flutter 软件包，它蕴含了所有磷图标。

在 Flutter 中实现图标非常简单:

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

就是这样，当初你的应用程序中有了一个丑陋的铅笔图标。

Sliding Clipped Nav Bar

https://pub.dev/packages/slid…

到目前为止，它简直是一个典礼，我提出了我的 10 个 Flutter 技巧文章导航 Pub 包。明天这篇文章提到了滑动滑块导航栏。这个软件包为你提供了一个让你的应用程序对用户来说更乏味的好办法。因为其令人难以置信的简略的执行和漂亮的设计，它是最好的导航 Pub 包之一。

然而 … … 说够了，导航栏和这个包装看起来怎么样？

我想你很分明我为什么这么喜爱这个包裹。有这么多的定制可能性和实现非常简单:

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

是的，就是这样。你不须要做其余的事件。这个软件包的 README 文件十分具体，使您能够非常容易地开始进入软件包。

Battery plus

https://pub.dev/packages/batt…

Battery_plus 是一个由 Flutter 社区反对的软件包，它能够提供对于电池状态的各种信息。它非常容易应用，并且能够用于许多应用程序:

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

兴许你曾经据说过这个包被解冻了，然而如果没有，我当初就向你解释 (因为它十分有用)。

当初咱们假如您曾经在 Flutter 中创立了一个数据类。正如您可能曾经留神到的，这里有大量的锅炉代码，查看这些代码令人不快。这就是为什么冰冻被发明进去。应用这个包，您能够创立具备多种可能性的数据类，只须要很少的样板代码。

我不会在这里向您展现如何实现 Freezed，然而 README 文件十分棒。

end.

祝你明天欢快！

© 猫哥

  • 微信 ducafecat
  • 博客 ducafecat.tech
  • github
  • bilibili

正文完
flutter
发表至： flutter
2022-05-14
 0
关于flutter:一个编译问题带你了解-Flutter-Web-的打包构建和分包实现
关于flutter:Flutter动态化框架Thresh
关于flutter:一起看-IO-Flutter-3-更新详解
关于flutter:邀请你参与字节跳动-UME-插件开发竞赛