alhilali_device_frame

Render Flutter widgets inside realistic phone, tablet, desktop, and laptop frames.

alhilali_device_frame is a maintained fork of the original MIT-licensed device_frame package. It is used by alhilali_device_preview, but you can also use it directly when you only need a framed widget.

Install

dependencies:
  alhilali_device_frame: ^1.4.1

Basic Usage

import 'package:alhilali_device_frame/alhilali_device_frame.dart';
import 'package:flutter/material.dart';

class PhoneMockup extends StatelessWidget {
  const PhoneMockup({super.key});

  @override
  Widget build(BuildContext context) {
    return DeviceFrame(
      device: Devices.ios.iPhone15Pro,
      orientation: Orientation.portrait,
      isFrameVisible: true,
      screen: const ColoredBox(
        color: Colors.white,
        child: Center(child: Text('Hello')),
      ),
    );
  }
}

Change Orientation

DeviceFrame(
  device: Devices.ios.iPhone15Pro,
  orientation: Orientation.landscape,
  screen: const MyScreen(),
)

Hide The Frame

DeviceFrame(
  device: Devices.android.samsungGalaxyS25,
  isFrameVisible: false,
  screen: const MyScreen(),
)

Use A Virtual Keyboard

DeviceFrame(
  device: Devices.ios.iPhone15Pro,
  orientation: Orientation.portrait,
  screen: VirtualKeyboard(
    isEnabled: true,
    child: const MyScreen(),
  ),
)

Create A Custom Device

final customPhone = DeviceInfo.genericPhone(
  platform: TargetPlatform.android,
  name: 'Custom Phone',
  id: 'custom-phone',
  screenSize: const Size(430, 932),
  pixelRatio: 3,
  safeAreas: const EdgeInsets.only(top: 44, bottom: 34),
  rotatedSafeAreas: const EdgeInsets.symmetric(horizontal: 44),
);

DeviceFrame(
  device: customPhone,
  screen: const MyScreen(),
)

Available Device Groups

Use the built-in device collections:

Devices.ios.all
Devices.android.all
Devices.macos.all
Devices.windows.all
Devices.linux.all

Or select individual devices:

Devices.ios.iPhone16ProMax
Devices.ios.iPadPro13InchesM4
Devices.android.googlePixel9ProXL
Devices.android.samsungGalaxyS25
Devices.macos.macBookPro

When To Use This Package

Use alhilali_device_frame directly when you need:

a device mockup inside your own UI
a framed widget in documentation
custom preview cards
screenshots generated by your own tooling

Use alhilali_device_preview when you need the complete preview workspace, toolbar, device picker, settings panel, and screenshot plugins.