drawing_page 0.0.2 copy "drawing_page: ^0.0.2" to clipboard
drawing_page: ^0.0.2 copied to clipboard

PlatformAndroidiOS
outdated

A Flutter plugin for Handsfree sketching and drawing page

example/lib/main.dart

// ignore_for_file: prefer_const_constructors, sort_child_properties_last, prefer_const_literals_to_create_immutables, override_on_non_overriding_member, prefer_typing_uninitialized_variables


import 'dart:io';
import 'package:flutter/material.dart';
import 'package:drawing_page/screen.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
  
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  
  double strokeWidth = 3.0;
  final gesture=Screens();
  
  
  
  List<DrawingPoints> points = [];
  bool showBottomList = false;
  double opacity = 1.0;
  Color selectedColor=Colors.black;
  StrokeCap strokeCap = (Platform.isAndroid) ? StrokeCap.butt : StrokeCap.round;
  SelectedMode selectedMode = SelectedMode.StrokeWidth;
  List<Color> colors = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.amber,
    Colors.black
  ];
  @override
  
  getColorList() {
    List<Widget> listWidget = [];
    for (Color color in colors) {
      listWidget.add(colorCircle(color));
    }
    Widget colorPicker = ClipOval(
      child: Container(
        padding: const EdgeInsets.only(bottom: 16.0),
        height: 36,
        width: 36,
        decoration: BoxDecoration(
            gradient: LinearGradient(
          colors: [Colors.red, Colors.green, Colors.blue],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        )),
      ),
    );
    listWidget.add(colorPicker);
    return listWidget;
  }
  Widget colorCircle(Color color) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedColor = color;
          var details;
          gesture.PanUpdate(context, details,selectedColor,3.0,opacity);
          
        });
      },
      child: ClipOval(
        child: Container(
          padding: const EdgeInsets.only(bottom: 16.0),
          height: 36,
          width: 36,
          color: color,
        ),
      ),
    );
  
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // appBar: AppBar(
        //   title: Text("Drawing Page"),
        //   centerTitle: true,
        // ),
        bottomNavigationBar: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
              padding: const EdgeInsets.only(left: 8.0, right: 8.0),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50.0),
                  color: Color.fromARGB(255, 36, 224, 206)),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        IconButton(
                            icon: Icon(Icons.album),
                            onPressed: () {
                              setState(() {
                                if (selectedMode == SelectedMode.StrokeWidth) {
                                  showBottomList = !showBottomList;
                                }
                                selectedMode = SelectedMode.StrokeWidth;
                              });
                            }),
                        IconButton(
                            icon: Icon(Icons.opacity),
                            onPressed: () {
                              setState(() {
                                if (selectedMode == SelectedMode.Opacity) {
                                  showBottomList = !showBottomList;
                                }
                                selectedMode = SelectedMode.Opacity;
                              });
                            }),
                        IconButton(
                            icon: Icon(Icons.color_lens),
                            onPressed: () {
                              setState(() {
                                if (selectedMode == SelectedMode.Color) {
                                  showBottomList = !showBottomList;
                                }
                                selectedMode = SelectedMode.Color;
                              });
                            }),
                        IconButton(
                            icon: Icon(Icons.clear),
                            onPressed: () {
                              setState(() {
                                showBottomList = false;
                                points.clear();
                              });
                            }),
                      ],
                    ),
                    Visibility(
                      child: (selectedMode == SelectedMode.Color)
                          ? Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: getColorList(),
                            )
                          : Slider(
                              value: (selectedMode == SelectedMode.StrokeWidth)
                                  ? strokeWidth
                                  : opacity,
                              max: (selectedMode == SelectedMode.StrokeWidth)
                                  ? 50.0
                                  : 1.0,
                              min: 0.0,
                              onChanged: (val) {
                                setState(() {
                                  if (selectedMode == SelectedMode.StrokeWidth) {
                                    strokeWidth = val;
                                  } else {
                                    opacity = val;
                                  }
                                });
                              }),
                      visible: showBottomList,
                    ),
                  ],
                ),
              )),
        ),
        body: GestureDetector(
           onPanUpdate: (details){
            setState(() {
             points=gesture.PanUpdate(context, details,selectedColor,3.0,opacity);  
             
            });
            
           },
           onPanStart: (details){
            setState(() {
              points=gesture.PanStart(context, details,selectedColor,3.0,opacity);
              
            });
           },
           onPanEnd: (details){
            setState(() {
              points=gesture.PanEnd(context, details);
              
            });
           },
          child: Container(
            margin: const EdgeInsets.only(top: 10),
            
             color:Colors.yellow[100],
            child: CustomPaint(

            size: Size.infinite,
            painter: DrawingPainter(
              pointsList: points,
            ),
          ),
          ),
        ),
      ),
    );
  }
}
6
likes
135
points
17
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter plugin for Handsfree sketching and drawing page

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_colorpicker, plugin_platform_interface

More

Packages that depend on drawing_page

Packages that implement drawing_page