CODEWITHSUNDEEP
flutterflutter-web
Karan Owalekar
Karan Owalekar

Reputation: 967

How to get border for a clipped Container() in flutter

I'm using 'polygon_clipper 1.0.2' to clip my container.

Container(
    height: 100,
    width: 100,
    child: ClipPolygon(
          child: Container(
               color: Theme.of(context).primaryColor,
              ),
          sides: 6,
          borderRadius: 10,
         ),
   ),

Here I get a Filled Hexagon, whose vertexes are curved.

I want a hexagon with just the border.

The following code gives a container having a rounded border. I want similar result but sides should be 6.

Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
                            width: 2, color: Theme.of(context).primaryColor
                            ),
           ),
     height: 100,
     width: 100,
)

Any Solution ?

Upvotes: 2

Views: 1292

Answers (1)

Mobina
Mobina

Reputation: 7119

You can use PolygonBorder:

import 'package:polygon_clipper/polygon_border.dart';

Container(
  height: 100,
  width: 100,
  decoration: ShapeDecoration(
    shape: PolygonBorder(
      sides: 6,
      borderRadius: 10,
      border: BorderSide(
        color: Theme.of(context).primaryColor,
      )
    ),
  )
),

Upvotes: 2

Related Questions