By A Better Material 3 Theme for Beautiful Apps
We are excited to announce the beta release of our brand new Material Design 3 theme. This new theme is based on the specs and guidelines of Google’s Material 3 design system, and includes new components and layouts to help you build beautiful and customizable Anvil apps.
An example plant shop showing off the new Material 3 theme
To get started, head over to the Anvil dashboard and create a New Material 3 app. If you want to learn more about the new theme, keep reading!
Built with Anvil
This theme was built from scratch, completely in Anvil, using all the new improvements we’ve released in the past year. This means anyone can build a theme like this, and you can build Anvil apps with any design system. Read more about this down below.
New and improved components
The new Material 3 theme provides a host of components entirely new to Anvil, including…
…and more. Check the whole list!
Easier Styling
Material 3 components have more customization options than classic Anvil components, which makes it easier to style your apps without using CSS. Most components also have a spacing property that allows you to set the padding and margin of your components. This makes it easer to space out components and lay out your page.
(Whisper it, but from today you’ll also see the new spacing properties on the built-in Anvil components!)
Better layouts and page navigation
The Material 3 theme makes it easier than ever to add page navigation to your apps.
The new NavigationLink component is designed to work with the theme’s pre-built layouts. Create a Form, choose a layout and add NavigationLinks to the Form. If you set the navigate_to property of a NavigationLink to one of your Forms, that Form will open when the NavigationLink is clicked.
Even better, create a reusable layout with all your NavigationLinks, and use it from all the pages of your apps. Now you can get the same navigation bar on every page!
NavigationLinks appear differently, depending on whether your form is using a navigation rail or a navigation drawer. Of course, you can switch between the two:
The NavigationRailLayout with NavigationLinks
The NavigationDrawerLayout with NavigationLinks
Just like components, the layouts have customisation properties that give you more control over the look and feel of your apps. For example, you can control what happens to the navigation rail when using the app on mobile. Should it become a bottom bar or a modal drawer? You can choose – and the docs will tell you how:
The NavigationRailLayout collapsed into an app bar on a small screen
The NavigationRailLayout collapsed into a modal drawer on a small screen
A new approach to themes
The release of the new Material 3 theme not only makes it easier to build beautiful Anvil apps, it changes the way themes work in Anvil.
The new Material 3 theme is just an Anvil app, which contains layouts and components that are available when the theme is used as a dependency. You can even add the theme to an existing app, and mix and match the components and layouts with other themes. This also means it’s easy to update to new versions of the theme as they are released.
Future themes will also be Anvil apps – whether they’re built by us or by other developers in the Anvil community. We encourage you to build your own themes and share them with the world! We’ll be releasing more examples and guides to help you turn your own designs into themes, so watch this space.
Examples
Ready to explore the new theme? We’ve built some example apps to show off the theme and its new components.
Plant shop
Check out this pretty e-commerce example. Our virtual plant shop uses the NavigationRailLayout and shows off new features such as the NavigationLink component and the sidesheet.
Try the app or clone the code and play around with it yourself.
Expense approval system
We’ve updated our expense approval example app. It makes use of the NavigationDrawerLayout as well brand new components such as the Slider and IconButton.
Visit the app or clone the code and play around with it yourself. (Note that the version on our Examples page is using the old theme while this new theme is still in beta.)
Task manager
We’ve also made an updated version of our task manager example app. It uses the NavigationDrawerLayout as well as the new ButtonMenu component.
Try the app or clone the code and play around with it yourself. (Note that the version on our Examples page is using the old theme while this new theme is still in beta.)
There’s more to come!
The new Material 3 theme is still a work in progress. There are more components, layouts, colour schemes and other updates to come.
There are also more themes on the way. Material 3 is the first of many. We’ve got our own plans for more themes in the future, but you should also keep an eye on the forum for themes developed by our community!
Learn more
Want to learn more? Read the documentation on the new Material 3 theme or ask us a question on the Anvil Community Forum.
More about Anvil
If you’re new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.
Want to build an app of your own? Get started with one of our tutorials:
Data Dashboard
Build Database-Backed Apps
Build a Simple Feedback Form
Build a data-entry app, and learn the techniques fundamental to building any Anvil app. In this tutorial, you will:
- Write server-side Python
- Build your User Interface
- Write client-side Python
- Store data in a database
- Deploy your app