device_frame 0.4.1 device_frame: ^0.4.1 copied to clipboard
Mockups for common devices.
device_frame #
Mockups for common devices.
Quickstart #
DeviceFrame(
device: Devices.ios.iPhone11,
isFrameVisible: true,
orientation: Orientation.portrait,
screen: Container(
color: Colors.blue,
child: Text('Hello'),
),
)
Usage #
Displaying virtual keyboard #
DeviceFrame(
device: Devices.ios.iPhone11,
orientation: orientation,
screen: VirtualKeyboard(
isEnabled: true,
child: // ...
),
)
Maintain device media query and theme in an encapsulated app #
DeviceFrame(
device: Devices.ios.iPhone11,
orientation: orientation,
screen: Builder(
builder: (deviceContext) => MaterialApp(
theme: Theme.of(context),
builder: (context, widget) => MediaQuery(
data: MediaQuery.of(deviceContext),
child: Theme(
data: Theme.of(deviceContext),
child: widget,
),
),
),
),
),
Precaching all device frames #
@override
void initState() {
DeviceFrame.precache(context);
super.initState();
}
Contributing #
Edit device frames #
All frames are designed in a Figma file. They are then all exported to assets/<name>.svg
files and then merged into a single lib/devices.g.dart
with the script/frame_generator.dart