In this article, I'm going to share some important things to master creating apps using Flutter version gepcode.com . Of course, this is something you must know and understand in depth later. Skuy just follow the writing below. Oh yes, each of the titles below, I will also write them later. So, don't miss it.
1. Object Oriented Programming
As I said in the article previous. Flutter has its own uniqueness, namely almost everything is a widget, and the widget itself is a object which is represented in the dart programming language. So, if you want to learn flutter, I highly recommend learning Object Oriented Programming (OOP) darts programming language. Because, it will be very difficult to understand how flutter renders UI if you don't know OOP.
2. Widgets
Widgets are a basic component of flutter, and indeed flutter is emphasized. In every widget, there is always a context which represents where the widget is.
3. Basic Design
If you have studied OOP Dart, you must know the basics of making designs. If you have experience in web design, or experience in making UI & UX designs such as figma applications and the like. Then most will definitely be easy to understand. Here I make a list for the basics of making designs that you must know.
- Color
Color use code. There are several kinds of writing colors in programming. Please take a look.
- Hexadecimal - this color is more often used in applications for design, as well as web programming. Examples of writing #000000 which will produce black, and #FFFFFF which will produce white. In hexadecimal writing, the maximum letters must only be up to the letter F, while the numbers are between 0 to 9. The length of this hexadecimal is 6 characters.
- RGB - Red Green Blue, writing This color is composed of Red, Green and Blue. Each parameter of the three colors is represented by numbers 0 to 255
- RGBA - Red Green Blue Alpha, the same as RGB but alpha here is used to represent color transparency, Alpha values are usually 0 to 1.
Well, the things above are some ways to write colors in web design. How about flutter? Flutter has its own object called Color() this object only accepts integer parameters, so the write color in flutter:
- Hexa - Color(0xff000000) b> will produce black color.
- For opacity or alpha we can use .withOpacity() then enter the transparency number.
- Typography
Typography is a method of writing art that is combined in programming languages, markup languages, cascading, and so on related to technicalities. Basic things in typography that you must know.
- Font family - The actual design typeface that represents the text.
- Font size - Font size Font weight - Font thickness
- Font color - Font color
- Font style - Usually this consists of underline , and
strike - Text alignment - text alignment, usually consisting of, center, justify, right/end, start/left
- Text direction - from left to right or right to left
- Line height - line height in each paragraph
- Letter spacing - or space per letter.
- Heading - Representation of the title of a paragraph, heading/heading this usually has a composition of 1 to 6.
- Paragraph
- Span - or you could say inline text
- Box
Why is it mandatory to know the box? every UI has boxes to implement. Boxes are usually used in making button (buttons), wrapping an object, putting text, and much more. Of course box is a very important element to know.
Example box:
It's just a box. Then you can brush with border radius. like this for example
You can see what the border radius looks like . Then there are more basic things that must be known in basic design. Namely, box shadow. Example:
You can see it, the box shadow is a shadow. This is also very important later on.
4. Library Manager
If you don't know what a library is, a library is a collection of code to help our work. Well, this flutter has its own library manager named pub.dev . How to install the library is not complicated. We will continue in the next article. only knowledge here. so as not to write too much, reduce boredom reading, and so that this website does not render too much text, hihi.
5. State Management
Flutter is not based on Document Object Model (DOM) , but based on the state manager. So, for those of you who have a web developer background and have no experience with React, and some javascript frameworks that use state managers, of course, you have to adapt again. However, compared to DOM, state is simpler and easier to maintain. State is used as the global variable that triggers UI changes when.
These 5 must-know basics are a long way to go. Each of these 5 basics I will write in the next chapters. Thank you for reading, I wish you good health.