Блог

У меня есть список изображений стикеров png, которые я хочу перетащить поверх фонового изображения и иметь возможность изменять размер после размещения его поверх фонового изображения и перетаскивать его в новое положение после изменения размера, любые мысли об этой реализации с помощью flutter будут оценены.

Вы можете скопировать вставить запустить полный код ниже
Вы можете использовать пакет https://pub.dev/packages/flutter_simple_sticker_view
Чтобы запустить демонстрационный код, вы можете скопировать ресурс из https://github.com/myriky/flutter_simple_sticker_view/tree/master/example/assets

фрагмент кода

 FlutterSimpleStickerView _stickerView = FlutterSimpleStickerView(
    Container(
      decoration: BoxDecoration(
          color: Colors.red,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  "https://images.unsplash.com/photo-1544032527-042957c6f7ce?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=800amp;q=60"))),
    ),
    [
      Image.asset("assets/icons8-superman-50.png"),
 

рабочая демонстрация

https://user-images.githubusercontent.com/581861/69323565-52a84100-0c8a-11ea-974e-f2887d8755b2.gif

полный пример кода с последней версией permission_handler

 import 'dart:typed_data';

import 'package:flutter/material.dart';

import 'package:flutter_simple_sticker_view/flutter_simple_sticker_view.dart';

import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:permission_handler/permission_handler.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "Flutter Simple Sticker View", home: HomeView());
  }
}

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  FlutterSimpleStickerView _stickerView = FlutterSimpleStickerView(
    Container(
      decoration: BoxDecoration(
          color: Colors.red,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  "https://images.unsplash.com/photo-1544032527-042957c6f7ce?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=800amp;q=60"))),
    ),
    [
      Image.asset("assets/icons8-superman-50.png"),
      Image.asset("assets/icons8-captain-america-50.png"),
      Image.asset("assets/icons8-avengers-50.png"),
      Image.asset("assets/icons8-iron-man-50.png"),
      Image.asset("assets/icons8-batman-50.png"),
      Image.asset("assets/icons8-thor-50.png"),
      Image.asset("assets/icons8-venom-head-50.png"),
      Image.asset("assets/icons8-homer-simpson-50.png"),
      Image.asset("assets/icons8-spider-man-head-50.png"),
      Image.asset("assets/icons8-harry-potter-50.png"),
      Image.asset("assets/icons8-genie-lamp-50.png"),
      Image.asset("assets/icons8-cyborg-50.png"),
      Image.asset("assets/icons8-one-ring-50.png"),
    ],
    // panelHeight: 150,
    // panelBackgroundColor: Colors.blue,
    // panelStickerBackgroundColor: Colors.pink,
    // panelStickercrossAxisCount: 4,
    // panelStickerAspectRatio: 1.0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Simple Sticker View"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.save_alt),
              onPressed: () async {
                Uint8List image = await _stickerView.exportImage();

                Map<Permission, PermissionStatus> statuses = await [
                  Permission.storage,
                ].request();
                await ImageGallerySaver.saveImage(image);
              },
            )
          ],
        ),
        body: _stickerView);
  }
}