代码目录
- How to Build a Flutter App to Display Device Details?
- dart实现
- XML实现
- dart实现
- dart实现
- dart实现
- dart实现
How to Build a Flutter App to Display Device Details?
在这里，我们将使用 Flutter 构建一个 android 应用程序，该应用程序显示正在运行的设备信息。为了显示有关设备的信息，我们将使用一个名为 device_info_plus 的包。
创建 Flutter 项目：
现在删除所有现有代码并删除测试文件夹
创建一个基本的应用屏幕：
dart实现
import 'package:flutter/material.dart';
void main() {
runApp(DeviceInfo());
}
class DeviceInfo extends StatefulWidget {
const DeviceInfo({Key? key}) : super(key: key);
@override
_DeviceInfoState createState() => _DeviceInfoState();
}
class _DeviceInfoState extends State<DeviceInfo> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: Container(),
),
);
}
}
将 device_info_plus 包添加到 pubspec.yaml 文件中。
XML实现
name: deviceinfo
description: A Flutter app that displays device information
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
device_info_plus: ^2.1.0
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
实例化 DeviceInfoPlugin 并在 DeviceInfoState 类中创建 AndroidDeviceInfo 的 Future。
dart实现
class _DeviceInfoState extends State<DeviceInfo> {
DeviceInfoPlugin _deviceInfoPlugin = DeviceInfoPlugin();
late Future<AndroidDeviceInfo> _androidDeviceInfo;
}
要检索 android 设备信息，我们需要获取未来，我们将在 initState 方法中完成。这是一个被覆盖的方法，您可以通过在 android studio 中按 ctrl + O 来获取模板。
dart实现
@override
void initState() {
_androidDeviceInfo = _deviceInfoPlugin.androidInfo;
super.initState();
}
为了在未来解析后构建小部件，我们将在构建方法中使用 FutureBuilder 小部件
dart实现
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: FutureBuilder(
future: _androidDeviceInfo,
builder: (context, snapshot) {
// When future solves build text widget until then show indefinite progress
if (snapshot.connectionState == ConnectionState.done) {
// Retrieve AndroidDeviceInfo from future
AndroidDeviceInfo _info = snapshot.data as AndroidDeviceInfo;
return Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_info.manufacturer.toString()),
Text(_info.model.toString()),
Text("Android API Version ${_info.version.sdkInt}"),
],
),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
));
}
最后，您的 main.dart 将如下所示：
dart实现
import 'package:device_info_plus/device_info_plus.dart';
import 'package:flutter/material.dart';
void main() {
runApp(DeviceInfo());
}
class DeviceInfo extends StatefulWidget {
const DeviceInfo({Key? key}) : super(key: key);
@override
_DeviceInfoState createState() => _DeviceInfoState();
}
class _DeviceInfoState extends State<DeviceInfo> {
DeviceInfoPlugin _deviceInfoPlugin = DeviceInfoPlugin();
late Future<AndroidDeviceInfo> _androidDeviceInfo;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: FutureBuilder(
future: _androidDeviceInfo,
builder: (context, snapshot) {
// When future solves build text widget until
// then show indefinite progress
if (snapshot.connectionState == ConnectionState.done) {
// Retrieve AndroidDeviceInfo from future
AndroidDeviceInfo _info = snapshot.data as AndroidDeviceInfo;
return Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_info.manufacturer.toString()),
Text(_info.model.toString()),
Text("Android API Version ${_info.version.sdkInt}"),
],
),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
));
}
@override
void initState() {
_androidDeviceInfo = _deviceInfoPlugin.androidInfo;
super.initState();
}
}
现在按下android studio的运行按钮来安装应用程序
注：本文由VeryToolz翻译自 How to Build a Flutter App to Display Device Details? ，非经特殊声明，文中代码和图片版权归原作者 gupta_shrinath所有，本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。