device_sim 0.1.3
device_sim: ^0.1.3 copied to clipboard
A device simulator to speed up development for different devices.
A device simulator to speed up development for different devices.
Approximates how an app looks and behaves on a device by simulating:
- frame
- notches, home indicators etc.
- screen size and resolution
- orientation
- safe areas
- keyboard insets
- visual density
- text styles
- (and more)
Usage #
- Wrap your app with the
DeviceSim
widget. - Add
useInheritedMediaQuery: true
to your app.DeviceSim( ... builder: (context) => MaterialApp( ... useInheritedMediaQuery: true, ... ))
- Open your app as desktop or web app.
Properties #
Name | Description | Default value |
---|---|---|
isEnabled |
whether the simulator is active | true if on web or desktop |
devices |
list of simulated devices | iphone13 , iphone13ProMax , ipad129Gen5 |
Devices #
Available Devices #
iphone13
iPhone 13iphone13pro
iPhone 13 proiphone13ProMax
iPhone 13 pro maxiphone13Mini
iPhone 13 miniiphoneSeGen3
iPhone SE (3rd gen.)ipad129Gen5
12.9" iPad Pro (5th gen.)googlePixel5
Google Pixel 5 (as in SystemUiMode.edgeToEdge with systemNavigationBarColor transparent)- more will follow
Custom Devices #
Implement a new DeviceConfiguration
:
const myDevice = DeviceConfiguration(
name: 'My Device',
frameConfiguration: FrameConfiguration(
frameInsets: EdgeInsets.all(20.0),
outerRadius: BorderRadius.all(Radius.circular(68)),
innerRadius: BorderRadius.all(Radius.circular(48)),
features: [
StaticFeature(
portraitAlignment: Alignment.topCenter,
child: IPhone13Notch(
width: 174.0,
height: 38.0,
)),
],
),
screenConfiguration: ScreenConfiguration(
standardRectangleDiagonalInInch: 5.42,
size: Size(375.0, 812.0),
portraitPadding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 34.0),
portraitViewPadding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 34.0),
portraitViewInsets: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
portraitPaddingIfKeyboard: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
portraitViewPaddingIfKeyboard: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 34.0),
portraitViewInsetsIfKeyboard: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 336.0),
landscapePadding: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 21.0),
landscapeViewPadding: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 21.0),
landscapeViewInsets: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
landscapePaddingIfKeyboard: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 0.0),
landscapeViewPaddingIfKeyboard: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 21.0),
landscapeViewInsetsIfKeyboard: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 209.0),
textScaleFactor: 1.0,
devicePixelRatio: 3.0,
targetPlatform: TargetPlatform.iOS,
features: [
Align(
alignment: Alignment.bottomCenter,
child: HomeIndicator(
widthInPortrait: 134.0,
widthInLandscape: 210.0,
),
),
]));
CalibrationScreen
helps to find the correct values for the ScreenConfiguration
. Just open it on a real device or emulator and find the values by rotating the device and opening and closing the keyboard.
void main() {
runApp(const MaterialApp(
home: CalibrationScreen(),
));
}
![](https://github.com/codecampn/device_sim/raw/main/calibration_screen.png)