It can be utilized by Clipper to clip the widget into any ideal shape. In Flutter, it very well may be done effectively because of built-in clippers like ClipOval, ClipRect, ClipRRect, and ClipPath. To accomplish this polygon shape you want to characterize what is the way which you want to clip to make your UI marvelous.

In this article, we will Explore Polygon Clipper In Flutter. We will implement a polygon clipper demo program and create a different polygon shape using the polygon_clipper package in your flutter applications.

polygon_clipper | Flutter Package
A Flutter plugin to create views using regular polygon shapes (e.g. Pentagons and Hexagons).pub.dev

Table Of Contents ::

Introduction

Constructor

Attributes

Implementation

Code Implement

Code File

Conclusion

Introduction:

Polygon clippers can be utilized to make distinctively shaped cards. After completing this article you will realize how to clip a widget into polygons with sides more noteworthy than three. You will figure out how to make a pentagonal shape, hexagonal shape, octagonal shape, etc.

Demo Module :

This demo video shows how to create a polygon clipper in a flutter. It shows how the polygon clipper will work using the polygon_clipper package in your flutter applications. It shows a pentagonal, hexagonal, octagonal shape and inside a network image using Polygon clippers. It will be shown on your device.

Constructor:

To utilize ClipPolygon, you need to call the constructor underneath:

ClipPolygon(
    {@required this.child,
    @required this.sides,
    this.rotate: 0.0,
    this.borderRadius: 0.0,
    this.boxShadows: const []
}
);

In the above Constructor, all fields marked with @required must not be empty.

Attributes:

There are some attributes of ClipPolygon are:

• > sides — This attribute is used to the number of sides of the polygon. In the above example, we have given the value of sides as 5 means pentagonal shape. To make a hexagonal shape just make the value of sides 6 and also make a different shape according to sides.
• > borderRadius — This attribute is used to smoothen out the pointy edges. You can change the value to improve the aesthetics or accordance with the general theme you follow for your app.
• > rotate — This attribute is used so you can specify the angle of rotation in degrees. For example, we have rotated the polygon 90 and 70 degrees in the above code
• > boxShadows — This attribute is used you can also customize the box-shadow to change the perceived elevation of the card.
• > child — This attribute is used to the widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children to that widget.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  polygon_clipper: ^1.0.2

Step 2: Import

import 'package:polygon_clipper/polygon_clipper.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

We will create three shapes of polygon clippers are pentagonal, hexagonal, and octagonal shapes. We will deeply discuss the below in code.

Container(
    padding: EdgeInsets.all(30.0),
    child: ClipPolygon(
      sides: 5,
      borderRadius: 5.0,
      rotate: 70.0,
      boxShadows: [
        PolygonBoxShadow(color: Colors.black, elevation: 7.0),
        PolygonBoxShadow(color: Colors.blue, elevation: 5.0)
      ],
      child: Container(
        child: Image.network(
          "https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dHJhdmVsfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
          fit: BoxFit.cover,
        ),
      ),
    )),

We will make a container widget. In this widget, we will add ClipPolygon() widget. Inside, we will add sides was five for pentagonal shape, borderRadius was five, rotate was 70 degrees and boxShadows. It’s child property, we will add Container and it’s child property, we will add an image network. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Next, we will create the same method as above. In ClipPolygon(), sides were six for hexagonal shape, rotate was 90 degrees, and boxShadows color for shadow/elevation of the card.

Container(
    padding: EdgeInsets.all(30.0),
    child: ClipPolygon(
      sides: 6,
      borderRadius: 5.0,
      rotate: 90.0,
      boxShadows: [
        PolygonBoxShadow(color: Colors.greenAccent, elevation: 4.0),
        PolygonBoxShadow(color: Colors.green, elevation: 5.0)
      ],
      child: Container(
        color: Colors.black,
        child: Image.network(
          "https://images.unsplash.com/photo-1530789253388-582c481c54b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80",
          fit: BoxFit.cover,
        ),
      ),
    )),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Next, we will create the same method as above. In ClipPolygon(), sides were eighth for octagonal shape, rotate was 90 degrees, and boxShadows color for shadow/elevation of the card.

Container(
    padding: EdgeInsets.all(30.0),
    child: ClipPolygon(
      sides: 8,
      borderRadius: 5.0,
      rotate: 90.0,
      boxShadows: [
        PolygonBoxShadow(color: Colors.black, elevation: 1.0),
        PolygonBoxShadow(color: Colors.grey, elevation: 5.0)
      ],
      child: Container(
        color: Colors.black,
        child: Image.network(
          "https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGhvdG9ncmFwaGVyfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
          fit: BoxFit.cover,
        ),
      ),
    )),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_polygon_clipper_demo/splash_screen.dart';
import 'package:polygon_clipper/polygon_clipper.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Splash(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(
          backgroundColor: Colors.green[300],
          automaticallyImplyLeading: false,
          title: Text("Flutter Polygon Clipper Demo"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                  padding: EdgeInsets.all(30.0),
                  child: ClipPolygon(
                    sides: 5,
                    borderRadius: 5.0,
                    rotate: 70.0,
                    boxShadows: [
                      PolygonBoxShadow(color: Colors.black, elevation: 7.0),
                      PolygonBoxShadow(color: Colors.blue, elevation: 5.0)
                    ],
                    child: Container(
                      child: Image.network(
                        "https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dHJhdmVsfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
                        fit: BoxFit.cover,
                      ),
                    ),
                  )),
              Container(
                  padding: EdgeInsets.all(30.0),
                  child: ClipPolygon(
                    sides: 6,
                    borderRadius: 5.0,
                    rotate: 90.0,
                    boxShadows: [
                      PolygonBoxShadow(color: Colors.greenAccent, elevation: 4.0),
                      PolygonBoxShadow(color: Colors.green, elevation: 5.0)
                    ],
                    child: Container(
                      color: Colors.black,
                      child: Image.network(
                        "https://images.unsplash.com/photo-1530789253388-582c481c54b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80",
                        fit: BoxFit.cover,
                      ),
                    ),
                  )),
              Container(
                  padding: EdgeInsets.all(30.0),
                  child: ClipPolygon(
                    sides: 8,
                    borderRadius: 5.0,
                    rotate: 90.0,
                    boxShadows: [
                      PolygonBoxShadow(color: Colors.black, elevation: 1.0),
                      PolygonBoxShadow(color: Colors.grey, elevation: 5.0)
                    ],
                    child: Container(
                      color: Colors.black,
                      child: Image.network(
                        "https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGhvdG9ncmFwaGVyfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
                        fit: BoxFit.cover,
                      ),
                    ),
                  )),
            ],
          ),
        ));
  }
}

Conclusion:

In the article, I have explained the basic structure of the Polygon Clipper in a flutter; you can modify this code according to your choice. This was a small introduction to Polygon Clipper On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Polygon Clipper in your flutter projects. We will show you what the Introduction is?. Show constructor and attributes of the Polygon Clipper. Make a demo program for working Polygon Clipper, and it shows a pentagonal, hexagonal, octagonal shape and inside a network image using Polygon clippers in your flutter application. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Draggable GridView is a regular mobile application connection. As the user presses now and again called touch and holds on a widget, another widget appears under the user’s finger, and the user draggable the widget to the last region and conveyances it. On multitouch devices, different draggable can happen at the same time because that there can be various pointers in touch with the devices immediately.

In this article, we will explore the Draggable GridView In Flutter. We will implement a draggable grid view demo program and create a draggable of the GridViewItems using the flutter_draggable_gridview package in your flutter applications.

Table Of Contents::

Draggable GridView

Constructor

Properties

Implementation

Code Implement

Code File

Conclusion

Draggable GridView:

Draggable GridView expands the convenience of the GridView widget in Flutter and offers you the chance of making a reorder of the GridViewItems clear by Draggable. It is too easy to even consider executing and superb to use.

Demo Module :

This demo video shows how to create a draggable grid view in a flutter. It shows how the draggable grid view will work using the flutter_draggable_gridview package in your flutter applications. It shows draggable interaction where the user long/touch presses on a choice of item and then drags it to the picture using the draggable technique. Something like a grid view with draggable can change the position both horizontally and vertically. It will be shown on your device.

Constructor:

To utilize DraggableGridViewBuilder, you need to call the constructor underneath:

const DraggableGridViewBuilder({
  Key? key,
  required this.gridDelegate,
  required this.listOfWidgets,
  required this.dragCompletion,
  this.isOnlyLongPress = true,
  this.dragFeedback,
  this.dragChildWhenDragging,
  this.dragPlaceHolder,
  this.scrollDirection = Axis.vertical,
  this.reverse = false,
  this.controller,
  this.primary,
  this.physics,
  this.shrinkWrap = false,
  this.padding,
  this.addAutomaticKeepAlives = true,
  this.addRepaintBoundaries = true,
  this.addSemanticIndexes = true,
  this.cacheExtent,
  this.semanticChildCount,
  this.dragStartBehavior = DragStartBehavior.start,
  this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  this.restorationId,
  this.clipBehavior = Clip.hardEdge,
})

In the above Constructor, all fields marked with @required must not be empty.

Properties:

There are some properties of DraggableGridViewBuilder are:

• > listOfWidgets: This property is used to [listOfWidgets] will show the widgets in Gridview.builder.
• > isOnlyLongPress: This property is used to accept ‘ true’ and ‘false’.
• > dragFeedback: This property is used to you can set this to display the widget when the widget is being dragged.
• > dragChildWhenDragging: This property is used to you can set this to display the widget at dragged widget original place when the widget is being dragged.
• > dragPlaceHolder: This property is used to you can set this to display the widget at the drag target when the widget is being dragged.
• > dragCompletion: This property is used to you have to set this callback to get the updated list.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  flutter_draggable_gridview:

Step 2: Import

import 'package:flutter_draggable_gridview/flutter_draggable_gridview.dart';

Step 3: Add the assets

Add assets to pubspec — yaml file.

assets:
 - assets/

Step 4: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

We will create a Stateful widget and the respective State class has to use with DragFeedback, DragPlaceHolder, DragCompletion.

class MyHomePageState extends State<MyHomePage>
    with DragFeedback, DragPlaceHolder, DragCompletion {
}

We will create a list of strings of an image that is equal to a List. generate().

static List<String> listOfImages =
List.generate(12, (index) => 'assets/${index + 1}.jpeg');

Now, we will create a listOf Widgets that are equal to the List. generate(). In bracket, inside we will add listOfImages.length (index), then return a Container widget. In this widget, we will add padding and its child property, we will add an Image. asset(). In bracket, we will add listOfImages[index] and Boxfit is cover.

List<Widget> listOfWidgets = List.generate(
  listOfImages.length,
      (index) => Container(
    padding: EdgeInsets.only(
      left: 4.0,
      right: 4.0,
      top: 8.0,
    ),
    child: Image.asset(
      listOfImages[index],
      fit: BoxFit.cover,
    ),
  ),
);

In the body, we will add DraggableGridViewBuilder() widget. In this widget, we will add gridDelegate was SliverGridDelegateWithFixedCrossAxisCount(). Also add crossAxisCount was 2 and childAspectRatio. We will add listOfWidgets, dragCompletion, isOnlyLongPress, dragFeedback and dragPlaceHolder.

DraggableGridViewBuilder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: MediaQuery.of(context).size.width /
        (MediaQuery.of(context).size.height / 3),
  ),
  listOfWidgets: listOfWidgets,
  dragCompletion: this,
  isOnlyLongPress: false,
  dragFeedback: this,
  dragPlaceHolder: this,
),

Now, widget feedback is used to can set this to display the widget when the widget is being dragged. We will return the container, it’s child property we will add items. child with width and height.

@override
Widget feedback(List<Widget> list, int index) {
  var item = list[index] as Container;
  return Container(
    child: item.child,
    width: 200,
    height: 150,
  );
}

Now, PlaceHolderWidget will use to show at drag target, when the widget is being dragged. We will return PlaceHolderWidget, it’s child property we will add a Container with white color.

@override
PlaceHolderWidget placeHolder(List<Widget> list, int index) {
  return PlaceHolderWidget(
    child: Container(
      color: Colors.white,
    ),
  );
}

This method, onDragAccept is used to you have to set this callback to get the updated list.

@override
void onDragAccept(List<Widget> list) {
  
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_draggable_gridview/flutter_draggable_gridview.dart';
import 'package:flutter_draggable_gridview_dem/splash_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Splash()
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage>
    with DragFeedback, DragPlaceHolder, DragCompletion {
  static List<String> listOfImages =
  List.generate(12, (index) => 'assets/${index + 1}.jpeg');
  List<Widget> listOfWidgets = List.generate(
    listOfImages.length,
        (index) => Container(
      padding: EdgeInsets.only(
        left: 4.0,
        right: 4.0,
        top: 8.0,
      ),
      child: Image.asset(
        listOfImages[index],
        fit: BoxFit.cover,
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.cyan[200],
        automaticallyImplyLeading: false,
        title: Text(
          widget.title,
        ),
      ),
      body: DraggableGridViewBuilder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 3),
        ),
        listOfWidgets: listOfWidgets,
        dragCompletion: this,
        isOnlyLongPress: false,
        dragFeedback: this,
        dragPlaceHolder: this,
      ),
    );
  }

  @override
  Widget feedback(List<Widget> list, int index) {
    var item = list[index] as Container;
    return Container(
      child: item.child,
      width: 200,
      height: 150,
    );
  }

  @override
  PlaceHolderWidget placeHolder(List<Widget> list, int index) {
    return PlaceHolderWidget(
      child: Container(
        color: Colors.white,
      ),
    );
  }

  @override
  void onDragAccept(List<Widget> list) {
  }
}

Conclusion:

In the article, I have explained the basic structure of the Draggable GridView in a flutter; you can modify this code according to your choice. This was a small introduction to Draggable GridView On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Draggable GridView in your flutter projects. We will show you what the Draggable GridView is?. Show constructor and properties of the Draggable GridView. Make a demo program for working Draggable GridView, and it shows draggable interaction where the user long/touch presses on a choice of item and then drags it to the picture using the draggable technique. Something like a grid view with draggable can change the position both horizontally and vertically in your flutter application. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.