Skip to content

Instantly share code, notes, and snippets.

@rahichesoft

rahichesoft/Custom Border Using Stack

Created July 9, 2018 19:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rahichesoft/a049f0611f366024d4c39b5a68d561c0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rahichesoft/a049f0611f366024d4c39b5a68d561c0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rahichesoft created this gist Jul 9, 2018.
    73 changes: 73 additions & 0 deletions Custom Border Using Stack
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    import 'package:flutter/material.dart';

    void main() => runApp(new MaterialApp(home: new app()));

    class app extends StatefulWidget {
    @override
    _appState createState() => new _appState();
    }

    class _appState extends State<app> {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    body: Container(
    child: Stack(
    children: <Widget>[
    ClipPath(
    clipper: CustomClip(),
    child: Image.network(
    "http://www.delonghi.com/Global/recipes/multifry/pizza_fresca.jpg",
    width: double.infinity,
    height: 400.0,
    fit: BoxFit.cover,
    )),
    CustomPaint(
    painter: BorderPainter(),
    child: Container(
    height: 400.0,
    ),
    ),
    ],
    ),
    ),
    );
    }
    }

    class BorderPainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
    ..style = PaintingStyle.stroke
    ..strokeWidth = 10.0
    ..color = Colors.red;
    Path path = Path();
    // uncomment this and will get the border for all lines
    path.lineTo(0.0, 0.0);
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height * 0.8);
    path.lineTo(0.0, size.height);
    path.close();
    canvas.drawPath(path, paint);
    }

    @override
    bool shouldRepaint(CustomPainter oldDelegate) => true;
    }

    class CustomClip extends CustomClipper<Path> {
    @override
    Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0.0, 0.0);
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height * 0.8);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
    }

    @override
    bool shouldReclip(CustomClipper<Path> oldClipper) => true;
    }