Flutter设备框架展示插件device_frame的使用
Flutter设备框架展示插件 device_frame 的使用
device_frame 是一个用于在 Flutter 应用中模拟常见设备的插件。它可以帮助开发者在设计和开发过程中更好地预览应用在不同设备上的显示效果。
快速开始
要使用 device_frame，只需将任何小部件包裹在 DeviceFrame 小部件中，并为其指定一个 device（可以通过 Device 访问器获取多种设备）。
DeviceFrame(
device: Devices.ios.iPhone11,
isFrameVisible: true,
orientation: Orientation.portrait,
screen: Container(
color: Colors.blue,
child: Text('Hello'),
),
)
使用方法
显示虚拟键盘
要显示一个通用的模拟虚拟键盘，只需将任何小部件包裹在 VirtualKeyboard 中。
DeviceFrame(
device: Devices.ios.iPhone11,
orientation: orientation,
screen: VirtualKeyboard(
isEnabled: true,
child: // ...
),
)
保持设备媒体查询和主题
为了确保 WidgetsApp 使用来自模拟设备的模拟 MediaQuery，请将其 useInheritedMediaQuery 属性设置为 true。
DeviceFrame(
device: Devices.ios.iPhone11,
orientation: orientation,
screen: Builder(
builder: (deviceContext) => MaterialApp(
useInheritedMediaQuery: true,
theme: Theme.of(context),
),
),
)
创建自定义设备
可以使用 DeviceInfo 工厂来创建自定义设备实例。
手机
DeviceInfo.genericPhone(
platform: TargetPlatform.android,
name: 'Medium',
id: 'medium',
screenSize: const Size(412, 732),
safeAreas: const EdgeInsets.only(
left: 0.0,
top: 24.0,
right: 0.0,
bottom: 0.0,
),
rotatedSafeAreas: const EdgeInsets.only(
left: 0.0,
top: 24.0,
right: 0.0,
bottom: 0.0,
),
)
平板
DeviceInfo.genericTablet(
platform: TargetPlatform.android,
name: 'Medium',
id: 'medium',
screenSize: const Size(1024, 1350),
safeAreas: const EdgeInsets.only(
left: 0.0,
top: 24.0,
right: 0.0,
bottom: 0.0,
),
rotatedSafeAreas: const EdgeInsets.only(
left: 0.0,
top: 24.0,
right: 0.0,
bottom: 0.0,
),
)
桌面显示器
DeviceInfo.genericDesktopMonitor(
platform: TargetPlatform.windows,
name: 'Wide',
id: 'wide',
screenSize: const Size(1920, 1080),
windowPosition: Rect.fromCenter(
center: const Offset(
1920 * 0.5,
1080 * 0.5,
),
width: 1620,
height: 780,
),
)
笔记本电脑
DeviceInfo.genericLaptop(
platform: TargetPlatform.windows,
name: 'Laptop',
id: 'laptop',
screenSize: const Size(1920, 1080),
windowPosition: Rect.fromCenter(
center: const Offset(
1920 * 0.5,
1080 * 0.5,
),
width: 1620,
height: 780,
),
)
完整示例 Demo
以下是一个完整的示例代码，展示了如何使用 device_frame 插件：
import 'package:device_frame/device_frame.dart';
import 'package:flutter/material.dart';
Future<void> main() async {
runApp(const ExampleApp());
}
class ExampleApp extends StatefulWidget {
const ExampleApp({Key? key}) : super(key: key);
@override
_ExampleAppState createState() => _ExampleAppState();
}
class _ExampleAppState extends State<ExampleApp> {
bool isDark = true;
bool isFrameVisible = true;
bool isKeyboard = false;
bool isEnabled = true;
final GlobalKey screenKey = GlobalKey();
Orientation orientation = Orientation.portrait;
Widget _frame(DeviceInfo device) => Center(
child: DeviceFrame(
device: device,
isFrameVisible: isFrameVisible,
orientation: orientation,
screen: Container(
color: Colors.blue,
child: VirtualKeyboard(
isEnabled: isKeyboard,
child: FakeScreen(key: screenKey),
),
),
),
);
@override
Widget build(BuildContext context) {
return DeviceFrameTheme(
style: DeviceFrameStyle.dark(),
child: MaterialApp(
title: 'Device Frames',
theme: ThemeData(
primarySwatch: Colors.purple,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: DefaultTabController(
length: Devices.all.length,
child: Scaffold(
backgroundColor: isDark ? Colors.white : Colors.black,
appBar: AppBar(
title: const Text('Device Frames'),
actions: <Widget>[
IconButton(
onPressed: () {
setState(() {
isFrameVisible = !isFrameVisible;
});
},
icon: const Icon(Icons.settings_brightness),
),
IconButton(
onPressed: () {
setState(() {
isDark = !isDark;
});
},
icon: const Icon(Icons.brightness_medium),
),
IconButton(
onPressed: () {
setState(
() {
orientation = orientation == Orientation.landscape
? Orientation.portrait
: Orientation.landscape;
},
);
},
icon: const Icon(Icons.rotate_90_degrees_ccw),
),
IconButton(
onPressed: () {
setState(
() {
isKeyboard = !isKeyboard;
},
);
},
icon: const Icon(Icons.keyboard),
),
],
bottom: TabBar(
isScrollable: true,
tabs: [
...Devices.all.map(
(x) => Tab(
text: '${x.identifier.type} ${x.name}',
),
),
],
),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(10),
child: Builder(
builder: (context) => !isEnabled
? FakeScreen(key: screenKey)
: AnimatedBuilder(
animation: DefaultTabController.of(context)!,
builder: (context, _) => _frame(
Devices[DefaultTabController.of(context)!.index],
),
),
),
),
),
),
),
),
);
}
}
class FakeScreen extends StatefulWidget {
const FakeScreen({
Key? key,
}) : super(key: key);
@override
_FakeScreenState createState() => _FakeScreenState();
}
class _FakeScreenState extends State<FakeScreen> {
bool isDelayEnded = false;
@override
void initState() {
Future.delayed(const Duration(seconds: 2)).then(
(value) => setState(
() => isDelayEnded = true,
),
);
super.initState();
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final mediaQuery = MediaQuery.of(context);
final color =
theme.platform == TargetPlatform.iOS ? Colors.cyan : Colors.green;
return Container(
color: color.shade300,
padding: mediaQuery.padding,
child: Container(
color: color,
child: AnimatedPadding(
duration: const Duration(milliseconds: 500),
padding: EdgeInsets.only(bottom: mediaQuery.viewInsets.bottom),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("${theme.platform}"),
Text("Size: ${mediaQuery.size.width}x${mediaQuery.size.height}"),
Text("PixelRatio: ${mediaQuery.devicePixelRatio}"),
Text("Padding: ${mediaQuery.padding}"),
Text("Insets: ${mediaQuery.viewInsets}"),
Text("ViewPadding: ${mediaQuery.viewPadding}"),
if (isDelayEnded) const Text("---"),
],
),
),
),
);
}
}
这个示例展示了如何使用 device_frame 插件来模拟不同设备的显示效果，并提供了控制帧可见性、主题模式、屏幕方向和虚拟键盘的功能。
更多关于Flutter设备框架展示插件device_frame的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter设备框架展示插件device_frame的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter应用中使用device_frame插件来展示设备框架的示例代码。device_frame插件允许你在应用中展示不同设备的框架，以便更好地预览你的UI设计。
首先，确保你已经在pubspec.yaml文件中添加了device_frame依赖：
dependencies:
flutter:
sdk: flutter
device_frame: ^4.0.0 # 请根据需要检查最新版本号
然后，运行flutter pub get来安装依赖。
接下来是一个完整的Flutter应用示例，展示如何使用device_frame插件：
import 'package:flutter/material.dart';
import 'package:device_frame/device_frame.dart';
import 'package:device_frame/presets/presets.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Device Frame Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Device Frame Example'),
),
body: Center(
child: DeviceFrame.iphone13(
device: devices.iPhone13,
orientation: DeviceOrientation.portrait,
screen: Container(
color: Colors.amber,
child: Center(
child: Text(
'Hello, World!',
style: TextStyle(fontSize: 24),
),
),
),
),
),
);
}
}
在这个示例中：
- 我们首先导入了必要的包，包括
flutter、device_frame和presets。 - 在
MyApp类中，我们创建了一个基本的Flutter应用。 - 在
MyHomePage类中，我们使用Scaffold和AppBar来构建页面的基本结构。 - 我们在
Center小部件中使用了DeviceFrame.iphone13方法来展示一个iPhone 13的设备框架。device: devices.iPhone13指定了设备型号。orientation: DeviceOrientation.portrait指定了设备方向为竖屏。screen参数包含了要在设备框架中显示的屏幕内容，这里我们用一个带有黄色背景和文本的小部件作为示例。
你可以根据需要更改设备型号、方向以及屏幕内容。presets文件中提供了多种设备型号，你可以根据需要选择。
希望这个示例代码能帮助你理解如何在Flutter应用中使用device_frame插件来展示设备框架。
