device_frame 0.5.2 copy "device_frame: ^0.5.2" to clipboard
device_frame: ^0.5.2 copied to clipboard

outdated

Mockups for common devices.

device_frame #

Device Frame for Flutter

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(
            useInheritedMediaQuery: true,
            theme: Theme.of(context),
        ),
    ),
),

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