screenshot_maker 1.0.0
screenshot_maker: ^1.0.0 copied to clipboard

A package for generating images laid out using Flutter. You can make images with Flutter's awesome layout system.

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.

out2のコピー

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

out2 2

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.

show_inner_screen_offset 2

Areas such as "notch" are represented by viewPadding.

sample_device_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: () {})));
  }
}
2
likes
120
pub points
0%
popularity

A package for generating images laid out using Flutter. You can make images with Flutter's awesome layout system.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, flutter_test

More

Packages that depend on screenshot_maker