Introduction
In this blog, we will learn how to implement custom shapes in Flutter using Shape of View. Flutter provides a wide range of widgets, but sometimes, we need something a little more unique to make our apps stand out. Shape of View allows you to create non-rectangular widgets and shapes, adding creativity and uniqueness to your UI. Let’s dive in and learn how to use it.
Why Use Shape of View in Flutter:
Custom UI Design :
Shape of View allows you to create non-standard shapes like waves, triangles, circles, hexagons, and more. This lets you break away from basic rectangular or circular widgets, giving your app a unique and modern look.
Improved User Experience :
With custom shapes, you can make your UI elements more engaging and interactive. Shaped buttons, containers, or image views can create a more intuitive and visually appealing experience for users.
Easy to Implement :
Shape of View simplifies the process of clipping and shaping widgets by providing built-in support for common shapes. This means you don’t need to manually create complex paths or use custom clippers from scratch.
Responsive Design :
Many custom shapes created with Shape of View scale well on different screen sizes, maintaining their visual appeal and improving overall responsiveness.
Implementation :
Creating a New Flutter Project Use the following command to create a new project:
flutter create shape_of_view_example
cd shape_of_view_example
Add the package in pubspec.yaml :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
name: flutter_shape_of_view description: use of flutter_shape_of_view plugin. publish_to: 'none' environment: sdk: '>=3.0.1 <4.0.0' dependencies: flutter: sdk: flutter kenburns_nullsafety: ^1.0.1 cupertino_icons: ^1.0.6 shape_of_view: ^2.0.0 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - assets/ |
Run the command to install all dependency :
|
1 |
flutter pub get |
The flutter pub get command is used in Flutter to retrieve all the dependencies listed in the pubspec.yaml file for a project.
The kenburns_nullsafety package in Flutter is used to apply a smooth zooming and panning effect to images, adding a dynamic, engaging movement often seen in slideshows.
The shape_of_view package in Flutter is used to create custom-shaped widgets, allowing for unique clipping and design effects like circles, waves, and more complex shapes, making UI elements more visually engaging.
Create the Asset Folders :-
you have the directories defined in pubspec.yaml for your assets, such as assets/images/ and assets/. You can create these folders manually in your project directory and place your assets inside.
Use Code In Your Project : –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import 'package:flutter/material.dart'; import 'package:kenburns_nullsafety/kenburns_nullsafety.dart'; import 'package:shape_of_view_null_safe/shape/diagonal.dart'; import 'package:shape_of_view_null_safe/shape_of_view_null_safe.dart'; class JacksmanPage extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Stack( children: [ ShapeOfView( elevation: 2, height: 350, shape: DiagonalShape( angle: DiagonalAngle.deg(angle: 15), ), child: Stack( children: [ KenBurns( maxScale: 5, child: Image.asset( "assets/background.jpg", fit: BoxFit.cover, ), ), Column(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: EdgeInsets.only(left: 18, top: 160), child: Text( "JOHN Dev", style: TextStyle( fontWeight: FontWeight.w400, color: Color.fromARGB(255, 247, 63, 7), fontSize: 24, shadows: [ Shadow( color: Colors.white, blurRadius: 1, offset: Offset(2, 2)), ]), ), ), Padding( padding: EdgeInsets.only(left: 16, top: 6.0), child: Text( "Android Developer", style: TextStyle( fontWeight: FontWeight.w900, color: Colors.black, fontSize: 30, shadows: [ Shadow( color: Colors.white, blurRadius: 1, offset: Offset(2, 2)), ]), ), ) ], ) ], ), ), Padding( padding: const EdgeInsets.only(left: 20, top: 270), child: Wrap( spacing: 20, runSpacing: 20, children: [ HelperWidget( shape: CircleShape(borderColor: Colors.black, borderWidth: 3), ), ], ), ), ], ), SizedBox(height: 200,), Text(" this is example of shape of view",style: TextStyle(fontWeight: FontWeight.w900,fontSize:20),) ], ); } } class HelperWidget extends StatelessWidget { const HelperWidget({super.key, this.shape}); final Shape? shape; @override Widget build(BuildContext context) { return ShapeOfView( height: 100, width: 100, elevation: 2, shape: shape, child: Image.asset( "assets/profile.jpg", fit: BoxFit.cover, ), ); } } |
Output:-
shape of view in flutter
Conclusion:
Shape of View is a valuable tool for Flutter developers that simplifies and enhances the design of custom-shaped widgets, making your app’s UI more engaging and unique. By providing pre-built shapes and easy-to-use clipping mechanisms, it reduces the complexity of manually defining shapes, improves design consistency, and allows for the creation of visually appealing elements without hassle. The seamless integration and flexibility make Shape of View an efficient way to build creative UIs, saving time and effort while ensuring a polished, professional look for your Flutter applications.
Hope you enjoyed this article. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development
Other blogs you may like…
Dart Macros: Metaprogramming with Code Generation
How To Use InAppWebView In Flutter
Utilizing Flutter Gen to Enhance Flutter Development
Integrating Gemini with Flutter
Reference :
https://pub.dev/packages/shape_of_view
Thanks for reading this blog ❤️
Be the first to comment.