Flutter – Glassmorphism UI Design for Apps
User Interfaces (UIs) are a critical component in the achievement and agreeableness of applications and websites. Also, since UIs are about looks and plan dialects, it is vulnerable to change in winning patterns and style. Throughout the long term, different developing styles have affected the UI environment. Skeuomorphism in the end offered approach to level, moderate plans. At that point came Neumorphism, which was propelled by objects in the actual world. The most recent pattern that has overwhelmed the UI world is Glassmorphism.
Glassmorphism is the most recent pattern in UIs and is quickly filling in prominence. One of the more standard uses of this plan showed up in Apple’s macOS Big Sur which turned out in 2020. However, what is Glassmorphism? As the name shows, it has a straightforward, smooth look. It is feasible for clients to see through layers. These layers can assist with presenting progressive system in the design. The highlights of this new UI style are:
- Straightforwardness as clarified above, this technique takes over a virtual glass, with background blur.
- A multi-layered methodology which appears as though the items are skimming in space.
- The obscured impact is highlighted with energetic tones.
- An unobtrusive boundary on the clear items
Since Flutter is the best open source UI software development kit for creating apps on different platforms using single codebase, we will be using it for the demonstration of this trending UI design.
Step 1 : Creating a new flutter application project and adding necessary dependencies.
- Open Vs Code, press “Ctrl+Shift+P” and select “Flutter: New Application Project”
- Select the folder where you want to add this flutter project to or create a new one
- Then after selecting the folder, give a name to your project and hit “Enter”
- Flutter will create a new project for you, then on the left bottom side click on the “pubspec.yaml” file
- Add the following dependencies, which includes the glassmorphism package (Check: https://pub.dev/documentation/glassmorphism/latest/) and google fonts package (Check: https://pub.dev/packages/google_fonts) for using the glassmorphic container and google fonts
dependencies: flutter: sdk: flutter glassmorphism ^1.0.4 google_fonts ^1.1.2
Step 2: Creating the assets folder and adding the required assets
- On the left side look for “New Folder” option, add a new folder and name it to “assets”
- Right-click on the folder and click on “Reveal in File Explorer”, in the assets folder make one more folder and name it “images”.
- Go to this link and download the asset files or you can choose the images on your own
- Copy these files to the assets folder, open the “pubspec.yaml” file again and add the following to the “flutter” section
flutter: uses-material-design: true assets: - assets/images/gfg_1.png - assets/images/technical_scripter.png
Step 3: This is the code for the “main.dart” file in the “lib” folder:
Step 4: Adding the Home page code to our project
- Right-click on the “lib” folder, add the new file and name it “HomePage.dart”
- The following is the code for “HomePage.dart” file
Step 5: Adding a new device and running the project
- Add a new device to your project like any android mobile emulator, real device or chrome(web)
- After that press “Ctrl + F5” or go to “Run”>”Run Without Debugging” and see the output on your connected device