CODEWITHSUNDEEP
flutteruser-interfacedart
nigale
nigale

Reputation: 116

how to create a styling in button in flutter?

How make this styling for a button in flutter. Since I'm a newbie, I have no Idea on how to do it.

In image the triangle is somewhat irregular, I want that to be matched with the button box.

enter image description here

Upvotes: 1

Views: 89

Answers (1)

bluenile
bluenile

Reputation: 6029

You can use the CustomPaint widget to get that effect. You can easily auto-generate the CustomPaint code from Flutter Shape Maker. Please see the code below. You can also run the code on DartPad at the following URL https://dartpad.dev/0171e4b838b740ea23f896f3b0be1f8e :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 360,
          height: 100,
          color: Colors.black,
          child: CustomPaint(
            size: Size(1200, 700),
            painter: FlagPainter(),
            child: Text(
              "text",
              style: TextStyle(color: Colors.black, fontSize:24),
            ),
          ),
        ),
      ),
    );
  }
}

class FlagPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 255, 255, 255)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;

    Path path_0 = Path();
    path_0.moveTo(0, 0);
    path_0.lineTo(0, size.height * 2.40);
    path_0.lineTo(0, size.height * 0.72);
    path_0.lineTo(size.width * 0.28, 0);

    canvas.drawPath(path_0, paint_0);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Upvotes: 4

Related Questions