Mastering SVG Icons In Flutter: A Comprehensive Guide

Hey everyone! Today, we're diving deep into the world of SVG Flutter icons. As a Flutter enthusiast, you know how important it is to have crisp, scalable, and visually appealing icons in your app. And SVG (Scalable Vector Graphics) is your best friend here! We'll explore everything from the basics of importing and using SVG icons to advanced techniques for customization and optimization. So, buckle up, guys, because we're about to embark on a journey to elevate your Flutter app's visual game with stunning SVG icons!

H2: Understanding SVG Icons and Their Advantages in Flutter

So, what exactly are SVG Flutter icons, and why should you care? Well, SVG is a vector-based image format, which means it uses mathematical formulas to define shapes and lines, rather than pixels. This is a game-changer, especially when working with icons in Flutter. The primary advantage is scalability. Because SVGs are vector-based, they can be scaled up or down without any loss of quality. This ensures your icons look sharp and clean, no matter the screen size or resolution of the user's device. Think about it: you don't want blurry icons on a high-resolution display!

Moreover, SVGs are incredibly versatile. They can be easily customized with different colors, sizes, and even animations. This flexibility allows you to create a unique and consistent visual style throughout your app. Also, SVG files are generally small in size compared to raster images (like PNGs or JPEGs), which leads to improved app performance and faster loading times. This is crucial for providing a smooth and responsive user experience.

Furthermore, working with SVG Flutter icons can be incredibly efficient. You can often find pre-designed SVG icons online, saving you time and effort in the design process. There's a vast library of free and paid SVG icon sets available, covering a wide range of design styles and functionalities. You can also create your own SVG icons using vector graphics editors like Adobe Illustrator, Sketch, or Inkscape. Finally, Flutter offers excellent support for handling SVG files through packages like flutter_svg, making it simple to integrate these icons into your app. This ease of integration means you can quickly add visually appealing and scalable icons to your Flutter projects, enhancing the overall look and feel. Trust me, guys, once you start using SVGs, you won't look back!

H2: Setting Up Your Flutter Project for SVG Icon Support

Alright, let's get your Flutter project ready to rock some SVG Flutter icons. Before you can start using SVGs, you'll need to install the flutter_svg package. This is the magic tool that enables Flutter to render SVG files. Open your pubspec.yaml file, and under the dependencies section, add the following line:

flutter_svg: ^2.0.0

(or the latest version, check the pub.dev website for the current one). Now, run flutter pub get in your terminal to download and install the package. Once the installation is complete, you're good to go! Now, how do you actually use this package? Well, importing SVGs is pretty straightforward. You'll typically place your SVG files in your project's assets folder. If you don't have an assets folder, create one at the root of your project. Then, in your pubspec.yaml file, you need to declare these assets under the flutter section. For example:

flutter:
  assets:
    - assets/icons/

This tells Flutter to look for SVG files in the assets/icons/ directory (adjust the path if your icons are in a different location). After making changes to your pubspec.yaml file, remember to run flutter pub get again. This ensures that Flutter recognizes the new assets. Next, in your Dart code, you can use the SvgPicture widget from the flutter_svg package to display your SVG Flutter icons. This is the core widget that renders the SVG content. You can specify the path to the SVG file, and customize its appearance like color, size, and alignment. Let's say you have an SVG icon named my_icon.svg located in your assets/icons/ folder. You could display it in your widget like this:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/my_icon.svg',
  width: 24,
  height: 24,
  color: Colors.blue,
);

This code snippet displays the my_icon.svg icon with a size of 24x24 pixels and a blue color. See? Easy peasy! You're now all set to start incorporating beautiful SVG Flutter icons into your app.

H2: Importing and Displaying SVG Icons in Your Flutter App

Okay, so now that you've set up your project, let's get those SVG Flutter icons actually showing on the screen! The flutter_svg package offers several ways to display SVGs, but the most common and recommended approach is using the SvgPicture.asset constructor. This method is ideal when your SVG files are stored as assets within your project. Here's a breakdown of how it works:

First, ensure your SVG files are in your assets folder (or a subdirectory, like assets/icons/). As mentioned earlier, you need to declare the asset paths in your pubspec.yaml file. Then, in your Dart code, import the flutter_svg package at the top of your file:

import 'package:flutter_svg/flutter_svg.dart';

Next, use the SvgPicture.asset widget to display your icon. Provide the path to your SVG file using the assetName parameter. For instance, to display my_icon.svg:

SvgPicture.asset('assets/icons/my_icon.svg');

By default, the icon will render with its original size. You can control the size of the icon using the width and height properties. For example, to display the icon at 32x32 pixels:

SvgPicture.asset(
  'assets/icons/my_icon.svg',
  width: 32,
  height: 32,
);

Important: The width and height properties control the dimensions of the rendered SVG, and they don't distort the icon; they scale it proportionally. You can also change the icon's color using the color property. This is especially useful for monochrome icons. For instance, to display the icon in red:

SvgPicture.asset(
  'assets/icons/my_icon.svg',
  width: 32,
  height: 32,
  color: Colors.red,
);

If you want to apply a color to the SVG that has a different color defined already, you should use the color property, and it will override the original fill color of the SVG. For more complex scenarios, such as displaying SVGs from a network URL or embedding SVG data directly, the flutter_svg package provides other constructors, like SvgPicture.network and SvgPicture.string. Remember, using SVG Flutter icons is all about making your app look professional and appealing. You are doing great!

H2: Customizing the Appearance of Your SVG Icons

Now, let's get into the fun part: customizing your SVG Flutter icons! The flutter_svg package gives you a bunch of options to tweak the appearance of your icons and make them fit perfectly with your app's design. The simplest customization is changing the color. You can use the color property of the SvgPicture widget. This is especially handy for monochrome icons, allowing you to easily adapt the icon's color to match your theme or user preferences. For instance, if you want to change an icon to blue:

SvgPicture.asset(
  'assets/icons/my_icon.svg',
  color: Colors.blue,
);

Next, the width and height properties control the size of your icon. Experiment with these values to find the perfect size for your UI elements. Keep in mind that SVG icons scale without losing quality, so feel free to experiment with different sizes! Also, using fit property. This controls how the SVG is scaled to fit within its container. Common values include BoxFit.contain (the default, which ensures the entire SVG is visible), BoxFit.cover (which covers the container while maintaining aspect ratio), and BoxFit.fill (which stretches the SVG to fill the container). For more advanced customization, you can use the semanticsLabel property to provide accessibility information for screen readers. This is a crucial step for making your app accessible to all users. The semanticsLabel provides a description of what the icon represents.

To take your customization a step further, you can use the SvgPicture.string constructor to render SVG data directly from a string. This approach allows you to manipulate the SVG's internal structure using code. However, it's generally recommended to use SvgPicture.asset or SvgPicture.network unless you have a specific need to modify the SVG data dynamically. In the situation that you have multiple icons that you want to have the same visual characteristics, you can extract the icon into a reusable widget to avoid code duplication. Customization options help achieve a polished and visually consistent look and feel within your application. Remember, the best apps have icons that are easy to spot and contribute to a good user experience.

H2: Working with Different SVG Icon Sets and Libraries

Let's talk about sourcing those awesome SVG Flutter icons! You don't always have to create them from scratch. There's a whole universe of pre-designed icon sets and libraries out there, ready for you to use. One of the most popular is Font Awesome. Font Awesome offers a massive collection of scalable vector icons that are perfect for a wide range of applications. While you can use Font Awesome directly with Flutter (through a specific package), a better approach is to download the SVG versions of the icons. This ensures the best possible rendering quality.

Then, you can import them into your Flutter project as described earlier. Another great resource is Material Design Icons. As you might expect, these icons align perfectly with Google's Material Design guidelines. They come in various styles and sizes, making them a great choice for apps that adhere to the Material Design language. You can find these in SVG format and use them seamlessly in your Flutter projects. Beyond these well-known options, explore platforms like Flaticon and Iconfinder. These websites offer vast libraries of free and premium SVG icons, covering a wide range of styles and use cases. You'll find everything from simple line icons to more complex illustrations. When selecting an icon set, consider the visual style. Does it match the overall aesthetic of your app? Does it cover the functionalities you need? Does it offer different styles (e.g., outlined, filled, duotone)? Before you start using an icon set, always check the licensing terms. Make sure you're allowed to use the icons for your intended purpose (e.g., commercial use). The availability of diverse icon sets and libraries makes it easier than ever to find high-quality icons that enhance the visual appeal and functionality of your Flutter app. Choosing the right icon set can drastically improve the overall feel of your application.

H2: Optimizing SVG Icons for Performance in Flutter

Alright, let's talk about keeping your Flutter app running smoothly when using SVG Flutter icons. While SVGs are generally efficient, there are a few things you can do to optimize them and ensure top-notch performance. First off, optimize the SVG files themselves. Before importing an SVG, make sure it's clean and optimized. Use online tools or vector graphics editors to remove unnecessary elements, simplify paths, and reduce file size. Smaller SVG files load faster and consume less memory. Also, consider using SVG optimizers. These are tools that automatically clean up and optimize your SVG files. They can remove redundant code, compress paths, and perform other optimizations to reduce file size. Popular optimizers include SVGO (SVG Optimizer), which is available as a command-line tool. The file size of the SVG files is important to the performance.

Next, be mindful of how you're rendering the icons. Avoid rendering extremely complex SVGs multiple times on the same screen. If you need to reuse an icon, consider using a single SvgPicture widget and applying different transformations (like color or size) to avoid unnecessary rendering operations. You can also cache your SVG icons if they don't change frequently. This allows Flutter to store the rendered icon in memory, avoiding the need to re-render it every time. Finally, use the flutter_svg package efficiently. Make sure you're using the latest version of the package. Check the package's documentation for any performance recommendations or best practices. Remember, optimization is an ongoing process. As your app grows and your icon usage becomes more complex, revisit your optimization strategies to ensure optimal performance. This also means doing some performance testing and monitoring tools. So, with the right approach to optimization, you can get all the benefits of SVG Flutter icons without sacrificing speed or responsiveness!

H2: Handling Dynamic SVG Icons and Data in Flutter

Sometimes, you need more than just static SVG Flutter icons. What if the icon changes based on user input or data from a server? No sweat! Here's how to handle dynamic SVG icons in Flutter. The most common scenario involves changing the color of an icon based on a state or user action. In this case, use the color property of the SvgPicture widget, as we discussed earlier. Simply wrap your SvgPicture widget in a StatefulWidget and update the color property based on your state. You can easily change colors based on any condition. For example, to change an icon's color on a button press, you can wrap the SvgPicture in a GestureDetector. This can handle tap events, where you can update the color in the setState() method.

Next, what about dynamically loading SVG icons from the network? The flutter_svg package provides the SvgPicture.network constructor. This method allows you to load SVG files from a URL. This is useful for fetching icons from a remote server or content delivery network (CDN). Keep in mind that you'll need to handle potential network errors and loading states. For that, you can wrap the SvgPicture.network widget in a try-catch block, displaying an error message or a placeholder image if the network request fails. Also, if you are loading SVG from a network, you should consider caching the images, so that you don't have to reload them every time. To load SVG data dynamically from a string, you can use SvgPicture.string. This is an advanced technique, allowing you to create and manipulate SVG code directly within your Dart code. You can generate SVG code dynamically based on your data and then render it using SvgPicture.string. Remember to sanitize your input if you're generating SVG code from user input to prevent potential security vulnerabilities. With these dynamic techniques, you can create responsive and interactive user interfaces that utilize SVG Flutter icons!

H2: Creating Custom SVG Icons within Your Flutter App

Sometimes, you need a unique icon that you can't find in existing sets. The good news is, you can create custom SVG Flutter icons directly within your app! The simplest approach is to use a vector graphics editor (like Inkscape, Adobe Illustrator, or Sketch) to create your icon, then import it into your Flutter project. However, if you need to generate or modify icons dynamically, you can also create SVG code programmatically in Dart. With that, you can create an SvgPicture.string widget. To create SVG code, you'll need to understand the basic structure of an SVG file, which involves path elements and other shapes like rectangles and circles. The path element is the most versatile; it allows you to draw complex shapes by defining a series of points and lines using a special string of commands (the d attribute). Creating complex shapes with code can be complex, so it's important to take your time.

For simpler shapes, you can use built-in SVG elements like rect, circle, and polygon. For example, to draw a filled circle, you can use the following SVG code:

<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="blue" />
</svg>

You can embed this code directly into your Flutter app using SvgPicture.string. You can adjust the size and colors dynamically to suit your needs. For more complex icons, it's helpful to use a library or helper functions to simplify the SVG generation process. There are a few packages available that can help with this. When creating custom icons, remember to consider the accessibility. Make sure your icons have sufficient contrast and provide appropriate labels using the semanticsLabel property, if necessary. This can ensure your app is inclusive. Creating custom SVG Flutter icons gives you complete control over your app's visual style. You can create unique and perfectly tailored icons, which will make your app stand out from the crowd! It's a great way to add a personal touch to your application.

H2: Using SVG Icons with Animated Icons in Flutter

Alright, let's spice things up! Let's discuss animating your SVG Flutter icons. Animation can significantly enhance the user experience, providing visual feedback and making your app more engaging. The flutter_svg package doesn't directly support SVG animations (like those defined using <animate> tags). However, you can still create animated icons by combining SVG with Flutter's animation capabilities. One common approach is to animate the properties of the SvgPicture widget, such as color, size, and position, using Flutter's animation framework. Let's say you want to create a simple pulsing animation for your icon. You can use an AnimationController to control the animation, and wrap your SvgPicture widget in an AnimatedBuilder. Inside the AnimatedBuilder, you can modify the properties of the SvgPicture (e.g., the scale or color) based on the current value of the animation.

For more complex animations, you might consider using Flutter's built-in animation widgets, such as TweenAnimationBuilder or AnimatedContainer. Another approach is to use an external animation library like rive or Lottie. These libraries provide more advanced animation capabilities and are generally better suited for complex SVG animations. These libraries allow you to import animations created in tools like Rive or Adobe After Effects, and then integrate them into your Flutter app. You can also use these libraries for vector animations, where you use SVGs as a basis for your animations. You can also use custom painting. This approach involves creating your own custom painter and using the Canvas object to draw and animate your SVG icons. This gives you the most flexibility but also requires a deeper understanding of Flutter's painting API. The use of animation helps provide feedback to the users. Keep in mind that animations can impact your app's performance if not implemented carefully. Make sure to optimize your animations to avoid any performance issues. With animation, you can create really cool SVG Flutter icons!

H2: Best Practices for Managing and Organizing SVG Icons

Let's talk about some best practices for managing and organizing those SVG Flutter icons. As your app grows, the number of icons can quickly become unmanageable if you don't have a good system in place. First, create a clear and consistent naming convention for your SVG files. Use descriptive names that clearly indicate what the icon represents. This will make it easier to find and identify your icons later. For example, use icon_settings.svg instead of just settings.svg. Next, organize your icons into logical folders. Group related icons together. For example, create a folder for social media icons, a folder for navigation icons, and so on. This helps to keep your project organized.

Consider creating an icon library or a utility class to centralize the use of your icons. You can define constants for the file paths of your icons, making it easier to use them throughout your app. For example:

class AppIcons {
  static const String settings = 'assets/icons/icon_settings.svg';
  static const String home = 'assets/icons/icon_home.svg';
}

You can then use these constants whenever you need to display an icon. This approach reduces code duplication and makes it easier to update your icons. When integrating SVG Flutter icons in different sizes and styles, create a utility function that returns the SvgPicture widget with pre-defined parameters. This centralizes the logic for rendering the icons, improving code readability. Also, you can use the same widget to apply different visual characteristics. For instance, if you need to display the same icon in different sizes and colors, create a function that accepts size and color parameters and returns the styled SvgPicture widget. Finally, always review and update your icon library. Regularly check for unused icons and remove them to keep your project clean. Make sure your icons are up to date. By following these organizational best practices, you can ensure your project stays clean, well-organized, and easy to maintain, especially as it grows. A well-organized project is easier to manage and helps avoid confusion!

H2: Troubleshooting Common Issues with SVG Icons in Flutter

Encountering issues is part of the development process, so let's prepare you for some common hiccups you might face when working with SVG Flutter icons. One of the most common problems is the icon not displaying at all. Double-check the file path in your code to ensure it's correct. Remember that paths are case-sensitive. Verify that the SVG file exists in the specified location. Then, check your pubspec.yaml file. Make sure you've declared the correct asset paths in the assets section. Also, run flutter pub get after making changes to your pubspec.yaml file. This ensures Flutter recognizes your assets. Another issue you might face is incorrect rendering or display. Sometimes, the flutter_svg package might not render some complex SVGs perfectly. In this case, try optimizing the SVG file. Simplify complex paths and remove any unnecessary elements. Sometimes, the SVG might render with the wrong size or color. In these situations, check the width, height, and color properties of your SvgPicture widget. Make sure they're set to the correct values.

Also, when you use the color property, be aware that it overrides the original fill color of the SVG. So, if you want to retain the original colors of your SVG, you might need to adjust your approach. If you're still having trouble, consult the flutter_svg package documentation. It provides detailed information and solutions to common problems. You can also search for solutions on online forums like Stack Overflow. Make sure you're using the latest version of the flutter_svg package. Updating the package can often resolve rendering issues. If you're using a very complex or non-standard SVG, it might not render correctly. In that case, you can try simplifying the SVG file or converting it to a more compatible format. When working with SVG Flutter icons, keep these tips in mind. Often, a simple mistake is the culprit. By following these guidelines, you can efficiently troubleshoot and resolve issues, ensuring your icons display as intended.

H2: Advanced Techniques: Combining SVG Icons with Other Flutter Widgets

Now, let's explore some advanced techniques for integrating SVG Flutter icons with other Flutter widgets. This will help you create even more sophisticated and visually appealing user interfaces. One useful technique is using icons within buttons and other interactive elements. Wrap your SvgPicture widget in a ElevatedButton, TextButton, or IconButton to create buttons with beautiful, scalable icons. You can easily customize the button's appearance (e.g., background color, text color) and add an onPressed callback to handle user interactions. You can also use icons in combination with text. For example, you might want to display an icon alongside some text in a ListTile. Use a Row or Column widget to arrange the icon and text horizontally or vertically. You can use the mainAxisAlignment and crossAxisAlignment properties to control the layout and alignment.

Another advanced technique is using icons in custom widgets. This allows you to create reusable and customized components that incorporate your icons. You can define the icon as a parameter in your custom widget and then use the SvgPicture widget to display it. This approach promotes code reusability and reduces code duplication. You can also combine your SVG Flutter icons with animations. Use Flutter's animation capabilities (e.g., AnimationController, AnimatedBuilder) to animate your icons, adding visual flair and improving the user experience. This can be done to the widgets and components. Finally, when combining icons with other widgets, remember to consider accessibility. Ensure that your icons have appropriate labels (using the semanticsLabel property) and provide enough contrast for users with visual impairments. The integration of icons, other widgets, and elements is the key to designing apps. With these advanced techniques, you can create stunning user interfaces that incorporate SVG Flutter icons seamlessly. This allows you to have professional and beautiful icons that provide a better experience.

H2: Accessibility Considerations for SVG Icons in Flutter

It's crucial to make your Flutter app accessible to everyone. When it comes to SVG Flutter icons, accessibility is often overlooked, but it's a vital part of creating an inclusive app. One of the most important things is providing alternative text for your icons. The flutter_svg package provides the semanticsLabel property. This property allows you to add a descriptive label to your icon. This label is read by screen readers, allowing users with visual impairments to understand what the icon represents. For example, if you have an icon of a settings gear, you would use:

SvgPicture.asset(
  'assets/icons/icon_settings.svg',
  semanticsLabel: 'Settings',
);

Make sure your labels are concise, clear, and accurately describe the icon's function. You should not only write the description but also consider that it is relevant to the context in which the icon is used. Also, ensure that your icons have enough contrast with their background. Low contrast can make it difficult for users with visual impairments to see and understand the icons. Use color contrast checkers to verify that your icons meet the required contrast ratios. Always use the right color and ensure the correct color contrast. You can also use the color property of the SvgPicture widget to change the icon's color. For more complex icons, such as those that are part of interactive elements, you may also need to provide additional accessibility information. This can involve wrapping the icon in a Semantics widget. You may want to mark a specific widget as a button to make it easier to access.

Make sure to use the correct semantic structure for your app. Use appropriate widgets (e.g., IconButton, ElevatedButton) to create interactive elements. This helps screen readers understand the role of the icon. In many cases, you can combine the semanticsLabel and the button structure to provide a great experience. As you design the app, always test the accessibility of your app by using screen readers. This can help you identify any accessibility issues and ensure that your icons are accessible. Following these guidelines will help you create accessible apps with SVG Flutter icons. With the right approach to accessibility, your app will be inclusive and user-friendly for all users.

H2: Future Trends and Innovations in Flutter Icon Design

Alright, let's peek into the future and see what's coming in SVG Flutter icons and icon design in Flutter! One exciting trend is the increasing use of animated icons. As mentioned earlier, while flutter_svg doesn't directly support SVG animations, we're seeing more innovative ways to integrate animations, especially with libraries like rive and Lottie. Animated icons add a dynamic element to your app and enhance the user experience. More integration with advanced vector graphics editors. We'll probably see even tighter integration with vector graphics editors, which may simplify the creation and import of animated icons.

Another trend is the growing popularity of custom-designed icon sets. Instead of using pre-made icon sets, many designers are creating custom icons to match their brand identity. This trend reflects the importance of creating a unique and recognizable visual style. Also, expect to see more sophisticated and complex icons. With advances in rendering technologies, we'll see the use of more complex and detailed icons, with intricate designs and gradients. It is important to consider the performance of the icon when creating it. The performance is an important factor in the overall experience. This is very important to users. With the evolution of the UI/UX design, you will likely find more complex and expressive styles. Also, the increasing adoption of design systems. As Flutter apps become more complex, the need for design systems will grow. Design systems promote consistency and ease of maintenance. Within a design system, the icon library is an integral part. When designing your icons, always keep these points in mind. Flutter continues to evolve, and with that the capabilities of SVG Flutter icons. With new tools and technologies, you can expect to see creative and innovative things in this space.

H2: Resources and Tools for SVG Icon Design and Implementation

Let's gather the tools, resources, and sources you might need for working with SVG Flutter icons! First, you need to have the right tools, so let's start with vector graphics editors. Adobe Illustrator, Sketch, and Inkscape are all great choices for creating and editing SVG icons. Inkscape is a free and open-source option. These editors allow you to design and manipulate vector graphics with precision. You will need to optimize them to reduce file sizes. Next, SVG optimizers like SVGO can automatically clean up and optimize your SVG files. This helps to reduce file size and improve performance. You can use online tools or command-line interfaces for this.

Also, the flutter_svg package is your best friend when it comes to rendering SVG icons in Flutter. Make sure you're familiar with its documentation and features. For icon libraries, you have Font Awesome and Material Design Icons. You can download the SVG versions of these icons from their websites. Also, explore Flaticon and Iconfinder, which have massive libraries of free and premium SVG icons. These resources can save you time and effort, especially if you're working with common icon designs. When dealing with animations, you can use libraries like Rive and Lottie. They allow you to create and import animated vector graphics.

For online resources, check out the flutter_svg package documentation and tutorials on the Flutter website and other platforms. Also, look for articles and tutorials. Many of these can help improve your workflow. Finally, when designing your SVG Flutter icons, keep the performance aspect in mind. Choose the right tools and optimize the files. You can also find a lot of content on the internet, like blog posts, video tutorials, and online forums. By leveraging these resources, you'll have all the tools you need to create stunning apps that can greatly improve your overall development. It's a great advantage to be aware of this.

H2: Conclusion: Elevating Your Flutter App with SVG Icons

In conclusion, guys, mastering SVG Flutter icons is a must for any Flutter developer who wants to create beautiful, scalable, and high-performing apps. As we've explored, SVGs offer significant advantages over other image formats, especially when it comes to scalability, customization, and file size. We've covered everything from setting up your project to customizing the appearance of your icons, and even handling dynamic and animated icons. Remember the core concepts: Use the flutter_svg package to render the icons. Customize them with the color, width, and height properties. Make sure you are always organizing your icons and the code. And always consider accessibility by using semanticsLabel.

We've also looked at best practices for managing and organizing your icons, as well as how to troubleshoot common issues. And don't forget the importance of accessibility. The main goal is to create an app that is inclusive for everyone. By providing alternative text and ensuring sufficient contrast, you can make your icons accessible to all users. By leveraging these techniques and resources, you can elevate your app's visual appeal and create a better user experience. With SVG Flutter icons, you can create professional-looking and visually stunning Flutter apps. With this guide, you can enhance the design of your Flutter apps. You will have the tools, resources, and knowledge to create great apps. This is a great way to add a unique feel to the application.