Flutter Create Sticky Note UI

Last updated Dec 18, 2021

Flutter is an open-source UI software development kit created by Google, so, In today's tutorial we will see how you can create a sticky note UI in Flutter

 

Let's start

Step 1: Create a new Flutter Application

Step 2: We will use a widget called CustomPaint that can be used to create a custom shape in Flutter and this widget has properties such as

CustomPaint CustomPaint({
Key key,
CustomPainter painter,
CustomPainter foregroundPainter,
Size size = Size.zero,
bool isComplex = false,
bool willChange = false,
Widget child,
})

 

where we will use a painter to create a sticky note UI and the child can be used to insert any widget or text on our sticky note.

Now for the painter, we can create a custom class that extends CustomPainter, where we will use the following functions

@override

  void paint(Canvas canvas, Size size) {

  }

 add

@override

  bool shouldRepaint(CustomPainter oldDelegate) {

    return oldDelegate != this;

  }

 

inside your custom painter class.

Step 3: Now for drawing lines we can use path from Path as path.lineTo which can be used to create a line and as one of the corner on a sticky note has a curve upwards we can use  path.quadraticBezierTo 

for example our sticky note shape 

void _drawNote(Size size, Canvas canvas, Paint gradientPaint) {

    Path path = new Path();

    path.moveTo(0, 0);

    path.lineTo(size.width, 0);

    path.lineTo(size.width, size.height);

 

    double foldAmount = 0.12;

    path.lineTo(size.width * 3 / 4, size.height);

 

    path.quadraticBezierTo(size.width * foldAmount * 2, size.height,

        size.width * foldAmount, size.height - (size.height * foldAmount));

    path.quadraticBezierTo(

        0, size.height - (size.height * foldAmount * 1.5), 0, size.height / 4);

    path.lineTo(0, 0);

    canvas.drawPath(path, gradientPaint);

  }

 

for our sticky note UI its also has a Gradient Color on it so we can use

 Paint _createGradientPaint(Size size) {

    Paint paint = new Paint();

 

    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);

    RadialGradient gradient = new RadialGradient(

        colors: [brighten(color), color],

        radius: 1.0,

        stops: [0.5, 1.0],

        center: Alignment.bottomLeft);

    paint.shader = gradient.createShader(rect);

    return paint;

  }

 

we can also create a shadow for our UI using Canvas where it has a property called canvas.drawShadow

for example

void _drawShadow(Size size, Canvas canvas) {

    Rect rect = Rect.fromLTWH(12, 12, size.width - 24, size.height - 24);

    Path path = new Path();

    path.addRect(rect);

    canvas.drawShadow(path, Colors.black.withOpacity(0.7), 12.0, true);

  }

 

Step 4: Now all these functions can be used inside our void paint() method inside our custom painter class as

@override

  void paint(Canvas canvas, Size size) {

    _drawShadow(size, canvas);

    Paint gradientPaint = _createGradientPaint(size);

    _drawNote(size, canvas, gradientPaint);

  }

 

Now that we have created our custom class we can use it inside a container

for example

Container(

        color: Colors.white,

        child: Center(

            child: SizedBox(

                width: 300,

                height: 300,

                child: StickyNote(

                  child: Text(

                    'This is a Sticky note',

                    style: TextStyle(color: Colors.black, fontSize: 16),

                  ),

                ))));

 

Complete example code for flutter sticky note ui

import 'dart:math';

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: StickyNoteContainer(),

    );

  }

}

 

class StickyNoteContainer extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container(

        color: Colors.white,

        child: Center(

            child: SizedBox(

                width: 300,

                height: 300,

                child: StickyNote(

                  child: Text(

                    'This is a Sticky note',

                    style: TextStyle(color: Colors.black, fontSize: 16),

                  ),

                ))));

  }

}

 

class StickyNote extends StatelessWidget {

  StickyNote({this.child, this.color = const Color(0xffffff00)});

 

  final Widget child;

  final Color color;

 

  @override

  Widget build(BuildContext context) {

    return Transform.rotate(

      angle: 0.01 * pi,

      child: CustomPaint(

          painter: StickyNotePainter(color: color),

          child: Center(child: child)),

    );

  }

}

 

class StickyNotePainter extends CustomPainter {

  StickyNotePainter({this.color});

 

  Color color;

 

  @override

  void paint(Canvas canvas, Size size) {

    _drawShadow(size, canvas);

    Paint gradientPaint = _createGradientPaint(size);

    _drawNote(size, canvas, gradientPaint);

  }

 

  void _drawNote(Size size, Canvas canvas, Paint gradientPaint) {

    Path path = new Path();

    path.moveTo(0, 0);

    path.lineTo(size.width, 0);

    path.lineTo(size.width, size.height);

 

    double foldAmount = 0.12;

    path.lineTo(size.width * 3 / 4, size.height);

 

    path.quadraticBezierTo(size.width * foldAmount * 2, size.height,

        size.width * foldAmount, size.height - (size.height * foldAmount));

    path.quadraticBezierTo(

        0, size.height - (size.height * foldAmount * 1.5), 0, size.height / 4);

    path.lineTo(0, 0);

 

    canvas.drawPath(path, gradientPaint);

  }

 

  Paint _createGradientPaint(Size size) {

    Paint paint = new Paint();

 

    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);

    RadialGradient gradient = new RadialGradient(

        colors: [brighten(color), color],

        radius: 1.0,

        stops: [0.5, 1.0],

        center: Alignment.bottomLeft);

    paint.shader = gradient.createShader(rect);

    return paint;

  }

 

  void _drawShadow(Size size, Canvas canvas) {

    Rect rect = Rect.fromLTWH(12, 12, size.width - 24, size.height - 24);

    Path path = new Path();

    path.addRect(rect);

    canvas.drawShadow(path, Colors.black.withOpacity(0.7), 12.0, true);

  }

 

  @override

  bool shouldRepaint(CustomPainter oldDelegate) {

    return oldDelegate != this;

  }

}

 

Color brighten(Color c, [int percent = 30]) {

  var p = percent / 100;

  return Color.fromARGB(

      c.alpha,

      c.red + ((255 - c.red) * p).round(),

      c.green + ((255 - c.green) * p).round(),

      c.blue + ((255 - c.blue) * p).round());

}

 

 

Output:

 

Conclusion: In this way, we have seen how you can use CustomPaint to create a Sticky Note UI in Flutter.

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

738 Views