device_frame 0.4.0

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