CODEWITHSUNDEEP
flutterdart
Edward Tanoto
Edward Tanoto

Reputation: 153

Diamond shaped button with border

anyone know how to design this button in flutter? It's a diamond shaped button with a border color.

enter image description here

Upvotes: 1

Views: 2148

Answers (3)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14835

You should try to use below code, add this dependency to your pubspec.yaml file flutter_custom_clippers: ^1.1.2 package found here

          ClipPath(
            clipper: ParallelogramClipper(),
            child: Container(
              height: 50,
              width: 50,
              color: Colors.pinkAccent,
              child: TextButton(
                onPressed: () {
                  print('object');
                },
                child: Text('OK'),
              ),
            ),
          ),

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63699

result

enter image description here enter image description here

full code

import 'dart:math' as math;

import 'package:flutter/material.dart';

class DimondButton extends StatelessWidget {
  const DimondButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.rotationZ(
            math.pi / 4,
          ),
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                width: 3,
                color: Colors.amber,
              ),
            ),
            child: InkWell(
              splashColor: Colors.blueAccent,
              onTap: () {},
              child: Center(
                child: Transform(
                  alignment: Alignment.center,
                  transform: Matrix4.rotationZ(
                    -math.pi / 4,
                  ),
                  child: Text(
                    "Click",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Upvotes: 4

Ardeshir ojan
Ardeshir ojan

Reputation: 2419

you have multiple approaches you can create a container with border color and transparent inner and transform it using transform.translate the other one is using custom paint which is a bit harder

Upvotes: 1

Related Questions