Flutter how to make custom Chip Widget

This article will help you to create a custom chip widget. Flutter also provides a default chip widget but in this view has a padding issue. If you tried to remove the default padding from the chip widget then you know you can only remove it to some extent, so this limitation we can remove easily make a custom chip view

First, Create a dart file

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: SafeArea(
            bottom: false,
            child: Scaffold(
                body: Container(
                    margin: EdgeInsets.only(right: 15, left: 15, top: 10),
                    child: Center(
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Container(
                            color: Colors.amberAccent,
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  top: 2, bottom: 2, left: 10, right: 10),
                              child: Text(
                                "Chip",
                                style: TextStyle(
                                    fontWeight: FontWeight.w500,
                                    color: Colors.white),
                              ),
                            )),
                      ),
                    )))));
  }
}

Now, run your project and you can see the custom chip view, You can change its color background, circular radius, and other properties as per your requirement. I hope you like this article.

Tags: