device_frame 0.4.2
device_frame: ^0.4.2 copied to clipboard

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(
            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