Introducing gluestack-ui for Flutter ๐
![Krishnagopal Sinha](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Fuser%2F1155%2F2023-07-26%2F027276128-1690365641.jpg&w=3840&q=75)
![lines](/_next/image?url=%2Fimages%2Fservices%2Fnew%2Flines-bg.png&w=3840&q=75)
In the ever-evolving landscape of app development, creating a cohesive and accessible user interface is more critical than ever. gluestack-ui for Flutter, inspired by it predecessor gluestack-ui, is not just a toolkit but a revolution in creating Flutter design systems with unmatched ease and simplicity.ย
Whyย gluestack-uiย for Flutter?
gluestack-ui for Flutter is designed to bridge the gap between the need for a consistent design language and the flexibility required for modern app development. It offers a set of customizable, accessible, and responsive widgets that can be easily integrated into Flutter applications.ย The motivation behindย gluestack-uiย is to provide developers with a toolkit that not only simplifies UI development but also helps develop a design system that is adaptable, consistent, and aligned with your brand vision.
How Canย gluestack-uiย Help You?
Withย gluestack-uiย for Flutter, you can easily define a design system for your Flutter apps. It provides a UI library with customizable props for each widget, allowing you to tailor its appearance and behavior to your specific needs. By using JSON for style configurations, you are enabling a more declarative and consistent approach to UI design. Need more than that? Use our style prop which takes in aย GSStyle
ย object and has support for tons of inline styling options. You can check out the ever-expanding list of widget components thatย gluestack-uiย supportsย here.
Key Features of gluestack-ui for Flutterย
- Customizable Widgets: Each widget in gluestack-ui comes with a set of customizable properties, allowing developers to tailor the appearance and behavior of components to their specific needs.
- Declarative and Dynamic Styling: Utilizing JSON for style configurations enables a more declarative approach to UI design, making it easier to change styles dynamically or load them from external sources.
- Web-Focus: Optimized for web experiences, gluestack-ui offers components and styles that are responsive and optimized for desktop interaction and layout, including responsive design, mouse hover interactions, and web-specific UI patterns.
- Flexibility for Developers: Inline style overrides provide developers with the flexibility to customize components on a case-by-case basis without altering the JSON configuration for minor tweaks.
- Responsive Design: Built with modern web design principles, gluestack-ui widgets are fully responsive, ensuring seamless performance across a wide range of device platforms and screen sizes.
- Well-Documented: Comprehensive documentation for each widget, including a list of properties and examples, will help developers to get up and running easily.
- Easy to Use: Designed to be easy to integrate into existing Flutter applications, gluestack-ui requires minimal setup and configuration.
- Independent from Material Design Standards: By embracing independence from Material Design, gluestack-ui grants developers the freedom to craft UI components tailored to their application's unique needs and branding, potentially enhancing user experiences and reducing resource consumption.
Building Your First App with gluestack-ui
Let us translate theory into practice by creating a simple yet stunning app. Starting with the installation of gluestack-ui in your Flutter project, you will experience firsthand the ease of bringing your design vision to life.
To get started with gluestack-ui for Flutter, you need to add it to your projectโs dependencies.
Install the Package
Simply run the following command in your terminal from project directory:
Or, you can do the same by adding the following to your pubspec.yamlย
file:
Or, for the latest development version:
Import the Package
After adding the dependency, importย gluestack-uiย into your Flutter app:
Congratulations, you have now successfully included gluestack-ui for Flutter in your project!
Let's Get Building
Let us imagine that we are making an app that follows the design system of a certain well-known music streaming app. The goal is to make such a button:
![image.jpeg](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F27134%2F2024-05-10%2F296000099-1715337056.jpg&w=3840&q=75)
In a normal Flutter app, since we are following a design system, we would try to make a reusable component of button that takes two parameters, namely, an icon and a text as child for the button.
The child widget of such a button may be declared so:
Now for the button itself, it may end up looking something like below:
Now since we know that all the buttons are supposed to follow a similar design, we would try to have some customizable props exposed for much needed configuration at times for this reusable component, along with configuring ThemeData to get the general look of the Design System down in our app. But what if there was a better way? In general, creating custom components for an app takes takes precious time and initially developers would spend time in the first phase of project planning and developing these custom components. But I ask of you again, what if there was a better way ?
This is where magic of gluestack-ui comes into play.ย Let us take same component as above, but now, the app is developed with gluestack-ui in the picture. Here are the basic general steps that you would need apart from getting the package installed in the project.
Use GSApp as the Entry Point of the App
Wrap the Entire Thing withย GluestackProvider
We are done with the base setup. Now, we can start tapping into the prowess of gluestack-ui!
Let us recreate the same button using GSButton [trivia: GS ->ย GlueStack] thatย gluestack-ui for Flutter provides and provide the above made ButtonChild
ย to it as its child widget. The code would look something like this:
But hey, what is this? The button does not look like what we are trying to make, it looks something like this:
![image (1).jpeg](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F27146%2F2024-05-10%2F251270753-1715337304.jpg&w=3840&q=75)
This is because we only have GSButton a UI component in place from gluestack-ui. We have not told it what sort of design system we are following yet. To do so, first let us see the default config file for GSButton, availableย here.
What's a config? Configs are basically JSON files that gluestack-ui uses in the form of
Map<String, dynamic>
type in Flutter, to give a default styling to the components like GSButton, GSText, etc. that are available under gluestack-ui for Flutter. With proper tools, one can export these config files directly from Figma and use them in their app directly!
As we can see, there are props like border and color that we need to configure to match the Design System we are following.
Let us refer to tokens information availableย hereย (especially at bottom $GSRadii) or fromย Githubย to choose our border radius from the available values. Let us go withย full
ย for now.
What about the color? Thanks to prowess of gluestack-ui, we could either think of modifying theย backgroundColor
ย in the config (viaย GluestackProvider
, not in the file directly) or we could define primary color at entire app level, which makes more sense to do here as lots of other components will be using this. Here is how we can do so:
We just made two changes, one in config and one in token, but we got the same result:
![image (2).jpeg](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F27152%2F2024-05-10%2F768040447-1715337461.jpg&w=3840&q=75)
And this would be consistently applied to all other GSButton andย gluestack-ui Flutter widgets! But that is not all. We can do some more fancy stuff thanks toย GSStyleย that gluestack-ui exposes. Let's say when we hover the mouse on theย GSbuttonย we want button to get a bit expanded as a visual cue of hovering. We can do so by:
Resulting UI:
![Screenshot 2024-05-10 at 4.09.56โฏPM.png](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F27156%2F2024-05-10%2F424144789-1715337607.png&w=3840&q=75)
Becauseย onHoverย and other parameters that can be used as triggers
acceptย GSStyle
ย object as input, we can modify all possible props available inย GSStyle
ย such as padding, color, etc. to be applied when theย onHoverย trigger is executed. Similarly, we also have triggers for screen break points, platforms, etc. This opens up tons of possibilities for powerful customization with minimal efforts.
To drive the point in further, here is a simple snippet for a GSButton that would change it's background color on the basis of platform - web, iOS, hover state and md screen break point.
![image (7).gif](https://static-cdn.geekyants.com/articleblogcomponent/27159/2024-05-10/199213469-1715341682.gif)
Let's Build More
Switch - Let us say we want a basic Switch, which is aligned with our design system. Since we have declared our primary colors inside GluestackProvider
. We can simply depend upon GSSwitch to create a Switch component aligned with our design language like so:
The output for the above looks like this:
![image (8).gif](https://static-cdn.geekyants.com/articleblogcomponent/27164/2024-05-10/281453985-1715341711.gif)
For reference, this is how the output would have looked if we had not specified any custom config or customized token:
![image (9).gif](https://static-cdn.geekyants.com/articleblogcomponent/27166/2024-05-10/474304339-1715341727.gif)
Easy and simple, right? Let's take on something a bit complex.
Let's Build Some More
Creating an Accordion can be a pain point to developers. With gluestack-ui though, you can simply depend upon GSAccordionย to build one. It accepts an array ofย GSAccordionItemย widget children which in turn take title and the content that needs to be displayed. The code for the above will look like this:
Output so far:
![image (3).jpeg](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F27172%2F2024-05-10%2F233746204-1715337931.jpg&w=1080&q=75)
Now, let us say the requirement is to have the heading text have a thinner, normal weight instead of the current default of it having bold weight.
We can make do with inline styling, but that is not the recommended approach. Since name of the game is consistent styling through out the app, gluestack-ui recommends that we make our changes by modifying tokens and config in theย GluestackProvider
. But to do, first we would need to refer Accordion's default config to understand what we need to modify, available here.
We can see that there is something called,ย fontWeight
ย defined. We can infer that must be controlling font weight of some text, but we also notice that it is defined, multiple times underย _titleText
ย and theย _contentText
ย . Since the goal is to change the title text, let us focus there. We can see where it is defined to get a bit more idea. We can see thatย fontWeight
ย forย _titleText
ย is declared in multiple places, inside ofย sm
,ย md
ย ,lg
ย underย size
ย underย vairant
.
Based on the above, we can infer that base config takes defines multiple size variants, namely, sm, md, lg which define config for title text and content text of the GSAccordion widget. We can simply change theย fontWeight
ย value for the title text (_titleText)
value for the specific size, if we wish, or all instances ofย fontWeight
ย to beย normal
. How did we know that we wanted declaringย normal
ย is allowed? We referred the default text tokens defined for gluestack-ui, availableย here, to know what values are allowed in the config. Do not change the base config files directly, unless you know what you're really doing! Generally, the safer option is to create a Map withย variants
ย and other config keys and values that we want to change or override, for our case since we want to override,ย fontWeight
ย insideย size
ย insideย variants
. Our config map would look like this:
Now all that remains is to provide this value to theย GluestackProvider, which would signify that we wish to override these keys and values present in the base Accordion config file. We can do this by:
Which results in:
![image (4).jpeg](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F27188%2F2024-05-10%2F766439550-1715342216.jpg&w=1080&q=75)
Which means that our requirement of normal font for heading of GSAccordion has been met. Nice.
You can checkout the code for all that we have done in this section in thisย GitHub repository.
For more info aboutย GSAccordionย and other widgets, visit Flutter'sย gluestack-ui docs, availableย here.
Showcase and Demos
Checkout theย Kitchensinkย interactive web app, created entirely by usingย gluestack-ui for Flutter. Demoย here.
![Kitchensink Interactive Web App](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F27184%2F2024-05-10%2F302608023-1715341823.jpg&w=1920&q=75)
Or, checkout all the components, tokens, docs, etc. fromย gluestack-ui for Flutter's homepage, orย click here.
Want to dive deeper and learn how things are working under the hood? Checkoutย gluestack-ui for Flutter'sย GitHub repository, availableย here. To stay updated with the most recent advancements, keep an eye out for updates in theย development branch.
Conclusion
As we conclude this exploration, remember that whether you are a seasoned Flutter developer or just starting out,ย gluestack-ui for Flutterย is a tool that can significantly enhance your development workflow and the quality of your applications which your users love while ensuring that your apps follow a consistent design language envisioned by you or the design system you are following.
gluestack-ui for Flutterย is more than just a tool. It is a companion in your journey to build apps that show your brand and presence in the digital realm. With every widget you place and every style you define, you are not just coding, but creating experiences that will echo in this realm for years to come.
Stay tuned for more updates and features fromย gluestack-ui for Flutter, and join theย communityย to contribute and get support.