Design Story 💙 1- 2 (Flutter — Material)
Content Titles
Day 1
1. Material Design
Material Design from the past — a brief look at the present,
Material Design design language and what we can do.
Material Design Where are the uses.
What are Material Design Components?
Components of Material Design What are the practical terms of use?
Quickly use design components in Flutter Projects with Material Design
2. What is DartPad?
How does it work with DartPad? What’s it for?
Why Use a DartPad?
What do you need to know before using DartPad?
Learning software with DartPad?
3.Creating our Flutter Project
Working in common with Flutter in the Material Library
Using the Material Library effectively on Flutter UIs,
Flutter Project File structure review,
How should project preparation be with Flutter?
Day 2
How to manage your Flutter Projects effectively
What are the reasons I prefer flutter Intelij IDE?
What tools does Intelij IDE offer us?
4.Viewing our project via Firebase
We are installing Our Flutter Web Project firebase.
5. Bonus Content: 2Dimensions.com did for us.?
Flare why you’ve been rive app…
Rive App story ?
Using our animation-oriented visuals project with Rive App.
Using Rive App effectively in Flutter Projects.
Hello friends,
Today, we will talk with you about a new design language that has helped us to remove our products, especially on many digital platforms for six (6) years.
Its name is material Design, this material design will be the point at which we will help us to develop more of our products together and get results and reach the end user.
Material Design from the past — a brief look at the present,
Material Design was presented by Google to users and developers in 2014, and today we see the material Design Structure of all the interfaces that Google has released. In particular, we see material Design touches on the Android platform, where mobile device users are more familiar with, however, many Android-based platforms play a huge role in material design on bees.
Material Design, in Google’s words, “offers a skeleton to move seamlessly from one situation to another.”
Material design helps us to provide smoother and more stable use when switching between user interfaces from a design point of view. we can say that it plays a big role in eliminating design-induced delays and interim losses due to the device’s graphical performance.
In fact, it’s worth saying that when you see an image of which of Google’s products has an interface, we’ll know that material Design plays a role, yes, it may apply to Android platforms, and the basis may apply to device-based work, or it may apply to a new Google product. In principle, the performance stability that an application has always had should be in front of us with the understanding that the user section is soft and there are no delays. If the interface that uses this is shaped in front of us in the opposite way, it will cause a comfortable suspension for end users and new users. That’s where material design principles begin to emerge.
The story of the creation of material design was inspired by every object that our eyes had seen. these include architectural designs, geometric objects that nature has presented to us, and works that artists from the past to the present have presented to human nature. Material design, simple and understandable is at the forefront, for example, each room inside a house shows different contact according to living conditions. For example, eating in the kitchen, sleeping in the bedroom, daily activities in the living room, design structure according to the area where they are all located are different. And naturally, the person can quickly express what the area is on as identification.
Material designs are among the most important principles to express information, accessibility and for what purpose, especially in any viewable object.
Material design static comes from multiple elements, consisting of shapes, fonts, and harmonious throes. And, of course, with today’s design languages, we also come across a redesignable form.
If we talk about material design principles, our 3 main topics and review will be healthy.
The metallum metaphor consists of multiple components, bold, graphical, for-the-for-good, motion meaning integrity, as detailed in the chart below.
Material design is inevitable to have physical rules and surreal designs, but this means that it is to get away from reality a little bit, so what is it to want to focus on the actual laws of physics in the structure in material design.
Material design also has a component structure that reveals the systems that rational planes have created within them.
Google design team has expressed two titles. The proximity of the agricultural structure of a digital object, first inspired by paper and ink, to reality is taken into mind. The next inspirational point is the elements that are brought together with the basic principles of light, surface and movement in mind.
As shown in the image above, the Z-axis is the area we call video on our devices, and in the rest of the processes, the moving areas of the objects in the Y axis and X-axis design flow, the three-dimensional design and the material components performed with the Building principle if you do not get up actually come across in a way that is relevant to what we mentioned above. If we remind you, we are building the design with the rules of real physics.
Light and shadow are the most important part of this game, the layers overlapping together on the Z axis, the heights between this process allows us to create more natural design products with the shadow images we have seen in orchids, especially when we perform more intuitive uses of this interface on our mobile devices, material design 6 years of development process, and still today the new Platform Arda comes across as an indispensable library. We’re going to talk about this in detail today.
There are 3 objects in the images you have seen above. Let’s examine the basic structures of these objects. We clearly realize what a strong design effect light is, and the second object in the first object.
Material design three-dimensional design structure on the Z axis, we see very clearly its formation. And every object created in the material design is created with the same thickness. This provides more useful transitions as a three-dimensional design principle, while providing a strong view of communication between graphics and objects.
We can clearly understand the importance of light and shadow in material design in the image above. We, as the end User, already know this because shadows, coloring, and intermediate layers and visuals are in multiple densities, especially in structures on other design platforms, causing delays in usage performance.
Components cannot move freely between layer structures, and they cannot pass through each other. helps to look more effective with the principle of light and shadow.
On the other hand, formic build will quickly change shape, helping to increase screen refresh times for applications in terms of performance.
We talked about light and shadow, but we didn’t talk about a point where we had to be careful when we talked about it.
Then height will definitely be our key when we come up with a product in material design. As mentioned in the above images, we have been getting a long-standing return that the designs are more realistic, prone to the laws of physics and acclaim for the end user, with the heights between objects on the Z axis, the shadow light game between the objects.
Material designs work in harmony even on more platforms,
-Android
-iOS
-Web
- Flutter
Material Design Library also helps us to create our products in harmony with developer libraries to design different platforms in common so that you can use designs more efficiently. As long as the design language is understandable, the experienced results between the developers and users who design them will always be more efficient.
Today we will examine the components with one of these. Flutter will be the developer library that we will use in interface design.
Then we can slowly switch to our second main title, his name is Flutter,
But I won’t write any articles about this topic here at length. You can get detailed information about my previous article i’ve written the link i leave here
Dart and Flutter together as a more effective web-based developer editor,
DartPad ?
You know, the Flutter developer Library is now helping us with a wider range of products, but there are some minor problems going on from the first version to the current stable version, in fact, the virtual core feature of the computers used to create the developer platform, than small problems, is very important for using virtual devices.
We’ll see about that in detail today. The IDE and virtual device-compatible operation that you have used to quickly display the mobile products or Web-based running products that we have developed will also help the developer get faster results.
In short, if I express my own ideas, at some moments we don’t need to use our computers in high performance.
Especially when we learn a new programming language, we learn the basics of the programming language, and there are platforms that do not require installation to make it easier and faster to get results.
One of them is the DartPad.
What a beautiful learning platform you are, DartPad,
Let’s take a quick look at the entire working structure and quickly view how a sample project works by creating a new project.
This adds and runs some startup codes to the editor. Every time you see that you’re using a DartPad, package:flutter opens a panel to display the user interface.
Or use the Examples menu to find a Flutter instance.
Of course, it is not as comprehensive as its capabilities on the IDE, but it is basically an ideal platform for learning to ensure that forward-looking projects for language inputs get very fast results with this interface design, which is also popular to the present day.
features what we can do and what basic design libraries we can have.
All of Flutter’s basic libraries, such as cupertino and material, are ready for use and can display DartPad documents. Select a symbol to see the documents in the sub panel.
When you’re ready to share your Snippet, you can create a GitHub account and put the identity of a URL extract like this: https://dartpad.dev/<GistID>. You can share this link in an error report, stackoverflow question, or your preferred social media platform.
We can examine the basics of multiple design structure very quickly, and if we want some of the components that we’ve tested on the platform here, we can view them on the IDE in our own project. And today we’re going to show more than one example.
So
If we want to create a Theme in Flutter, how do we do it? There are many practical ways to do this. Many style files can be created that run based on css, sass, or js as they are on the web.
We can examine the basics of multiple design structure darts very quickly, and if we want some of the components that we have tested on the platform here, we can view them on the IDE in our own project. And today we’re going to show more than one example.
One of our main objectives here is to better understand and view our plaftorm working processes, which will help us to free up time in the products we implement.
Now let’s take a look at what we can do with DartPad by focusing on multiple simple basic examples on Dart.
Examples
https://dart.dev/samples
http://jpryan.me/dartbyexample/
Among our examples, I believe that we will see the basic terminological structure of Dart and how clearly we will see it in the process of use.
Let’s try it together.
We can start by examining one example above, which we need to do first. https://dartpad.dev/ the Website. Let’s look at this very quickly.
You can view all of the samples by trying them. I believe that you can understand the basic language structure very clearly and with it will help in the processes in your applications.
There are editors where you can edit your multiple codes, but we don’t have the smallest idea of which one to start with.
Two of them will help us completely in this process.
Intellij IDE
VS Code
You can quickly view and improve your projects using dynamics such as Debugging, project running, and HotReload, where you can get instant quick updates by installing add-on packages in all of them.
My advice is to recommend that you use both Platforms to determine the habit of the summer.
Yes, in to improve our Application about Flutter, let’s create a project and make installations such as arrangements, small preparations for this project.
You can continue the rest of the processes by watching with the content of the video believe that you will find the answer to more than that so have a good time.
YT- Design Story -1
https://www.youtube.com/watch?v=FACOlGJNBNY
YT- Design Story -2
