screenshot_maker

A package for generating images laid out using Flutter. This package allows you to use Flutter's amazing layout system to generate images. You can use it to create screenshots for the App Store and Play Store.

You can use Flutter Inspector and Debug Paint to debug the layout.

This package provides two widgets: ScreenshotMaker and Simulated.

Usage

ScreenshotMaker

Renders the child according to the specified size and writes it to the specified file.

Passing this widget to runPkg and launching it as a Flutter app with a simulator will output the image. The simulator you use is independent of the output size. In order to easily adjust the layout, I recommend using a tablet device with a large display such as an iPad.

At the moment, Android emulators and web browsers cannot output images on the development machine, so please use the iOS simulator.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:screenshot_maker/screenshot_maker.dart';

void main() {
  runApp(
    ScreenshotMaker(
      // TODO: write your absolute path.
      outputFile: File('/Users/your_name/Desktop/simple.png'),
      size: Size(500, 1000),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(),
          body: Text('text'),
        ),
      ),
    ),
  );
}

Simulated

Fits your Flutter app into the device frame image you specify and compose it. Position and size are specified by innerScreenOffset and innerScreenSize.

Areas such as "notch" are represented by viewPadding.

The resolution of the device is represented by the originalLogicalScreenSize. This needs to be expressed in logical pixels.

The device frame image must have a transparent display area. There are no device frame images included in this package, so you'll need to prepare them. There is a very simple one in example/assets, but it's not recommended to be used in production.

When using Simulated, please use runPkg instead of runApp. This is to ensure that the viewPadding settings are applied correctly.

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

void main() {
  // Use runPkg instead of runApp.
  runPkg(
    Directionality(
      textDirection: TextDirection.ltr,
      child: Simulated(
        innerScreenSize: const Size(1658, 3588),
        innerScreenOffset: const Size(116, 103),
        originalLogicalScreenSize: const Size(414, 896),
        deviceFrameImage: Image.asset('assets/example_device_frame.png'),
        viewPadding:
            const PhysicalViewPadding(left: 0, top: 68, right: 0, bottom: 66),
        child: const MyAwesomeApp(),
      ),
    ),
  );
}

class MyAwesomeApp extends StatelessWidget {
  const MyAwesomeApp();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("My Awesome App")),
            body: ElevatedButton(child: Text('foobar'), onPressed: () {})));
  }
}