用于 Flutter 应用程序的 5 个开源插件

使用这些适用于 Google 跨平台开发语言的插件，更快地创建更有用、更具吸引力的应用程序。
121 位读者喜欢这篇文章。

Flutter 是 Google 编程队伍中的最新成员。继 Android、Kotlin 和 Golang 取得成功之后，Flutter 被创建为一种跨平台应用程序开发语言。 它主要基于 Dart 编程结构，并被认为是下一个重要的编程范例，因为它的代码可以作为移动应用程序、Web 应用程序甚至桌面应用程序运行，而无需进行任何重大更改。 据说它将支持 Google 即将推出的 Fuschia 操作系统。

Flutter 插件是简单的依赖项，可以扩展语言的功能。 这份关于五大开源 Flutter 插件的列表包括与用户界面 (UI) 相关的插件和与功能相关的插件。

这些插件必须包含在您的 pubspec.yaml 文件中才能使用； 需要修改项目内 lib 文件夹中的 pubspec.yaml 文件。

Flutter video-player 插件

video_player 插件允许您嵌入视频以在 Flutter 应用程序中播放。

注意：在 Flutter 1.9 之前，Flutter 中没有视频播放器支持，因此您必须依赖于像 video_player 这样的外部插件。这为我们提供了 VideoPlayer 类，我们将在本文中使用它。

在 Flutter 中使用 VideoPlayer 类之前，您必须为 iOS 和 Android 应用程序执行以下操作。

先决条件

对于 Android

确保最小 SDK 设置为 21。您可以通过 android>app 文件夹中的 Build Gradle 修改此设置。

接下来，通过在 AndroidManifest.xml 文件中添加以下行，确保 AndroidManifest.xml 文件已启用互联网权限

<uses-permission android:name="android.permission.INTERNET"/>

对于 iOS

要授予使用互联网渲染视频的权限（如果需要），请将以下行添加到 <project root>/ios/Runner/Info.plist 中的 info.plist 文件

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Android 和 iOS 的先决条件完成后，将以下行添加到 dependency 部分的 pubspec.yaml 文件中

dependencies: video_player: ^0.10.1+3

然后使用 get packages 同步项目。

Video_Player 插件基础知识

Video_Player 插件通过创建一个简单的 API 来调用视频，从而支持在设备上播放网络和本地视频。 下面的示例应用程序展示了 Video_Player 插件如何使用控制器对象以及如何创建 Future<> Builder 以在加载时播放视频。

首先使用 Scaffold widget 作为父主体 widget。 目标是让用户能够使用按钮控件播放和暂停视频。

为了从任何地方调用视频播放器对象，您需要一个控制器来保存它。 VideoPlayerController 类使这成为可能。 示例应用程序将所有内容组合在一起。

示例 Flutter 视频播放器应用程序

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(VideoPlayerApp());

class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);

  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    );

    // Initialize the controller and store the Future for later use.
    _initializeVideoPlayerFuture = _controller.initialize();

    // Use the controller to loop the video.
    _controller.setLooping(true);
    super.initState();
  }

  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      backgroundColor: Colors.orangeAccent,
      appBar: AppBar(
        title: Text('Bee Video'),
        backgroundColor: Colors.black87,
      ),
      // Use a FutureBuilder to display a loading spinner while waiting for the
      // VideoPlayerController to finish initializing.
      body: Stack(
        children: <Widget>[
          Center(child:FutureBuilder(
            future: _initializeVideoPlayerFuture,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                // If the VideoPlayerController has finished initialization, use
                // the data it provides to limit the aspect ratio of the video.
                return AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  // Use the VideoPlayer widget to display the video.
                  child: VideoPlayer(_controller),
                );
              } else {
                // If the VideoPlayerController is still initializing, show a
                // loading spinner.
                return Center(child: CircularProgressIndicator());
              }
            },
          )),
          Center(
              child:
              ButtonTheme(
                  height: 100.0,
                  minWidth: 200.0,
                  child: RaisedButton(
                    padding: EdgeInsets.all(60.0),
                    color: Colors.transparent,
                    textColor: Colors.white,
                    onPressed: () {
                      // Wrap the play or pause in a call to `setState`. This ensures the
                      // correct icon is shown.
                      setState(() {
                        // If the video is playing, pause it.
                        if (_controller.value.isPlaying) {
                          _controller.pause();
                        } else {
                          // If the video is paused, play it.
                          _controller.play();
                        }
                      });
                    },
                    child: Icon(
                      _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
                      size: 120.0,
                    ),
                  ))
          )
        ],
      ),
    );
  }
}

这是生成的应用程序。

Flutter Video Plugin

Flutter Video Plugin

Flutter Shimmer Effect 插件

Flutter Shimmer Effect UI 插件非常简单：您只需在您的 widget 树中使用一个类，即可完成工作。 以下是 Shimmer Effect 的外观

Flutter Shimmer Effect plugin

要实现此效果，请跳转到 widget 定义，并在您的 widget 树中使用具有以下选项的 Shimmer 类

Shimmer.fromColors

接下来，填写下面描述的属性以完成应用程序。

Shimmer.fromColors 属性

Shimmer.fromColors 具有以下属性

  • baseColor： 这是在 widget 上显示的微光的基本颜色。 这是主颜色，也是子 widget 将使用的颜色。
  • HighlightColor： 这是通过不断在子 widget 上挥动来产生类似微光效果的颜色。
  • Child： 这保存了产生 Shimmer Effect 的任何 widget。 它可以是 Text widget 或任何复杂的结构。

示例程序显示了这些属性如何在复杂的 widget 中工作。

示例 Flutter Shimmer Effect 应用程序

此示例为两个重要的 widget 生成 Shimmer Effect：Text widget 和 Listview widget。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() => runApp(ShimmerEffectApp());

class ShimmerEffectApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample ShimmerEffect Widget',
home: ShimmerWidget(),
);
}
}

class ShimmerWidget extends StatefulWidget {
ShimmerWidget({Key key}) : super(key: key);

@override
_ShimmerWidgetState createState() => _ShimmerWidgetState();
}

class _ShimmerWidgetState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Shimmer effect"),),
body: Container(
padding: EdgeInsets.all(25.0),
child:Center(
child: Shimmer.fromColors(
direction: ShimmerDirection.rtl,
period: Duration(seconds:5),
child: Column(
children: [0, 1, 2, 3]
.map((_) => Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 48.0,
height: 48.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: 40.0,
height: 8.0,
color: Colors.white,
),
],
),
)
],
),
))
.toList(),
),
baseColor: Colors.grey[700],
highlightColor: Colors.grey[100]),
)
),
);
}
}

这是生成的应用程序。

Flutter Shimmer Effect plugin

Flutter Shimmer Effect plugin

Flutter Badges 插件

Flutter Badges 是一个非常有用的 UI 插件，用于标记通知计数、电子商务购物篮中的商品计数等。

要使用 Flutter Badges 插件，请在您的 pubspec.yaml 文件中添加以下依赖项

dependencies:
    badges: ^1.1.0

然后，将以下行导入到您的 main.dart 文件中

import 'package:badges/badges.dart';

现在，您可以通过简单地调用 Badge class 来创建徽章。

Badge 类属性

以下是 Badge 类可用的属性

  • badgeContent： 这是采用 Badge 值的属性。 它可以是数字、字母等。 确保使其尽可能小！
  • BadgeColor： 通过调整 BadgeColor 颜色属性来控制徽章的颜色。
  • AnimationType： 这为徽章启用了三种动画
    • BadgeAnimationType.scale： 加载发生后缩放动画。
    • BadgeAnimationType.fade： 加载发生后淡入动画
    • BadgeAnimationType.slide： 加载发生后滑动动画
  • shape： 这控制徽章的形状； 它可以是圆形或方形。
  • AnimationDuration： 这采用 Duration 类作为其值，以设置动画应持续多长时间。

设置这些属性后，您可以创建一个像下面这样的简单应用程序。

示例 Flutter Badge 应用程序

将以下内容添加到您的 main.dart 文件并运行该应用程序。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:badges/badges.dart';

void main() => runApp(BadgesApp());

class BadgesApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'APP',
home: BadgesWidget(),
);
}
}

class BadgesWidget extends StatefulWidget {
BadgesWidget({Key key}) : super(key: key);

@override
_BadgesWidgetState createState() => _BadgesWidgetState();
}

class _BadgesWidgetState extends State {

int value = 0;

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text("Sample Badges")),
body: Center(
child: Container(
padding: EdgeInsets.all(25.0),
child: Column(
children: [
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Notifications", style: TextStyle(color: Colors.white),),
onPressed: (){
setState(() {
value = value + 1;
});
},),
badgeContent: Text('$value',style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(milliseconds: 500),
shape: BadgeShape.circle,
),
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Messages", style: TextStyle(color: Colors.white),),
onPressed: (){

},),
badgeContent: Text("2",style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(seconds: 1),
shape: BadgeShape.circle,
),
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Notifications", style: TextStyle(color: Colors.white),),
onPressed: (){
},),
badgeContent: Text("2",style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(seconds: 1),
shape: BadgeShape.circle,
),
Spacer(flex: 4,)
],
),
),
)
);
}
}

这是生成的应用程序。

Flutter Badges plugin

Flutter Google Maps 插件

借助 google_maps_flutter 插件，在 Flutter 应用程序中添加 Google Maps 是一个非常容易的过程。

注意：Google Maps Flutter 插件仍处于开发者预览阶段（因此尚不能发布到应用商店）。 在使用它之前，请务必等待稳定版本发布。

使用此插件的主要先决条件是拥有一个 Google Cloud Platform 帐户并创建一个 Google Maps API 密钥。 如果您不知道如何获取密钥，请参阅 在 Flutter 中集成 Google Maps。

使用凭据/API 密钥启用 Google Maps SDK 后，您可以在您的 Flutter 应用程序中使用它。 使用密钥填写以下内容。

对于 Android

转到 android>app>src>main>Androidmanifest.xml 并确保清单如下所示（用您的 API 密钥替换 YOUR KEY HERE）

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

对于 iOS

如下编辑 Appdelegate.m 文件（用您的 API 密钥替换 YOUR KEY HERE）

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

GoogleMaps widget 基础知识

现在是将 Maps 带入 Flutter 应用程序的时候了。 首先，在 pubspec.yaml 文件中添加以下依赖项

dependencies: 
 google_maps_flutter: ^0.5.21

将以下包导入到 main.dart 文件中

import 'package:google_maps_flutter/google_maps_flutter.dart';

此包提供以下 widget

GoogleMap

GoogleMap widget 提供了对 Flutter 应用程序中的 Google Maps 的主要控制。 它具有几个重要的属性，可以帮助创建您需要的地图。 它们是

  • mapType： 此属性定义了显示的地图类型（卫星地图、混合地图或普通地图）。 通过值 MapType.satellite、MapType.hybrid 或 MapType.normal 选择一个。
  • InitialCameraPosition： 初始相机位置对于在 Flutter UI 上渲染地图和设置相机位置（相机将从中移动）非常重要。 通过使用 CameraPosition 类创建变量来设置初始相机位置。
  • OnMapCreated： 这是一个回调，每当相机位置发生变化时（例如，每当用户通过捏合或滑动来移动地图时）触发。 要以编程方式移动相机角度，请改用 GoogleMapController。

GoogleMapController

此类通过创建它的实例来控制 Google Map。 没有明确的方法来更改 Google Map 的相机位置，但是您可以使用 GoogleMapController 来控制 GoogleMap 类上的各种活动。

CameraPosition

CameraPosition 类提供了在 GoogleMap 上显示任何位置所需的相机位置值。

CameraPosition initPosition = CameraPosition( 
target: LatLng(14.5, 25.7), zoom: 7, );

CameraPosition 类采用各种属性，例如 target、zoom 等。 Target 属性标记 Google Map 上的纬度和经度位置。 该类采用一个 double 值，例如 LatLng(double, double) 以在该位置标记它。

示例 Flutter GoogleMaps 应用程序

此示例应用程序在 Google Map 上创建一个动画相机过渡。 这是在 Flutter 应用程序中提供 Google Maps 的一种非常有用的方法。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(GoogleMapApp());

class GoogleMapApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample GoogleMap Widget',
home: GoogleMapWidget(),
);
}
}

class GoogleMapWidget extends StatefulWidget {
GoogleMapWidget({Key key}) : super(key: key);

@override
_GoogleMapWidgetState createState() => _GoogleMapWidgetState();
}

class _GoogleMapWidgetState extends State {

Completer _controller = Completer();

@override
void initState() {
super.initState();
}

CameraPosition initPosition = CameraPosition(
target: LatLng(14.5, 25.7),
zoom: 7,
);

void updateGoogleMap()
async{
GoogleMapController cont = await _controller.future;
setState(() {
CameraPosition newtPosition = CameraPosition(
target: LatLng(14.5, 28.7),
zoom: 4,
);
cont.animateCamera(CameraUpdate.newCameraPosition(newtPosition));
});

}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black45,
title: Text("Update Google Map"),
),
body: Center(
child: Column(
children: [
Container(
height: 400.0,
child: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: initPosition,
onMapCreated: (GoogleMapController controller){
_controller.complete(controller);
},
),
),
FlatButton(
child: Text("Update Map", style: TextStyle(color: Colors.white),),
color: Colors.deepOrange,
onPressed: (){
updateGoogleMap();
},
)
],
),
));
}
}

这是生成的应用程序。

Flutter Google Maps plugin

Flutter Google Maps plugin

ImagePicker 插件将图像库集成到 Flutter 应用程序中。

要开始使用 image_picker 插件，请在 pubspec.yaml 文件中添加以下依赖项

dependencies:
  image_picker: ^0.6.1+4

这需要在您的主文件中添加一个 import 语句，例如，main.dart 文件

import 'package:image_picker/image_picker.dart';

要在 iOS 中使用 Flutter 应用程序，请在 info.plist 文件中进行以下更改

  • NSPhotoLibraryUsageDescription: 这描述了应用程序为何需要使用照片库的权限。在可视化编辑器中，这被称为Privacy - Photo Library Usage Description（隐私 - 照片库使用描述）。
  • NSCameraUsageDescription: 这描述了应用程序为何需要访问相机的权限。在可视化编辑器中，这被称为Privacy - Camera Usage Description（隐私 - 相机使用描述）。
  • NSMicrophoneUsageDescription: 如果您打算录制视频，则这描述了您的应用程序为何需要访问麦克风的权限。在可视化编辑器中，这被称为Privacy - Microphone Usage Description（隐私 - 麦克风使用描述）。

图像选择器（Image Picker）组件基础

要使用 ImagePicker 组件，只需调用 ImagePicker 类。 此类有两个选项

  • 选择图像或选择视频
  • 直接从图库或相机源选择图像或视频

这可以通过两种方法回调来实现

  • ImagePicker.pickImage()，源为 ImageSource.gallery 或 ImageSource.camera
  • ImagePicker.pickVideo()，源为上述源

这两个调用都是异步调用，需要在所选的图像或视频上调用 setState()。

ImagePicker.<source call> 返回图像/视频的文件位置。 您必须使用 Image.file() 调用来加载图像。

所有这些都在示例应用程序中进行了说明。

Flutter 图像选择器（ImagePicker）组件示例应用程序

此示例应用程序创建一个 图像选择器按钮，用于从图库或直接从相机选择图像。

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(ImagePickerApp());

class ImagePickerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Imagepicker Widget',
home: ImagePickerWidget(),
);
}
}

class ImagePickerWidget extends StatefulWidget {
ImagePickerWidget({Key key}) : super(key: key);

@override
_ImagePickerWidgetState createState() => _ImagePickerWidgetState();
}

class _ImagePickerWidgetState extends State {

File _image;
@override
void initState() {
super.initState();
}

void open_camera()
async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});

}
void open_gallery()
async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sample Imagepicker Widget"),
backgroundColor: Colors.black45,),
body: Center(
child: Container(
child: Column(
children: [
Container(
color: Colors.black12,
height: 300.0,
width: 900.0,
child: _image == null ? Text("Still waiting!") : Image.file(_image),),
FlatButton(
color: Colors.deepOrangeAccent,
child: Text("Open Camera", style: TextStyle(color: Colors.white),),
onPressed: (){
open_camera();
},),
FlatButton(
color: Colors.limeAccent,

child:Text("Open Gallery", style: TextStyle(color: Colors.black),),
onPressed: (){
open_gallery();
},
)
],
),
),
)

);

}
}

这是生成的应用程序。

Flutter ImagePicker widget

Flutter ImagePicker widget

Flutter ImagePicker widget

总结

这五个插件对于在 Flutter 应用程序中创建更简洁的 UI 体验非常重要。 它们还将帮助您更快地掌握 Flutter 应用程序开发。

本文中的一些信息之前已在 Android Monks 上发布。

接下来要阅读的内容
标签
Android
Baradwaj Varadharajan
User profile image.
Androidmonks.com 的创始人/博主，这是一个开源博客/网站，提供与 Android 相关的免费内容。 如果您一直想学习 Android。 也是一名时间旅行者/博主。
更多关于我

1 条评论

Avatar
John Watson | 2020 年 1 月 13 日
还没有读者喜欢这个。

非常informative的博客

相关内容

Creative Commons License本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
© 2025 open-source.net.cn. All rights reserved.