Use [] to find tag! Example: [flutter, javascript]

Flutter is Amazing
Flutter is Amazing

Chapter 2

Basic Things You Must Know

remove_red_eye 2052 Times
spellcheck 792 Words, 4703 Characters
*Note: this book is still ongoing until it has a finished label.

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.

  1. 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.
  2. 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
  3. 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:

  1. Hexa - Color(0xff000000) b> will produce black color.
  2. 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.

  1. Font family - The actual design typeface that represents the text.
  2. Font size - Font size
  3. Font weight - Font thickness
  4. Font color - Font color
  5. Font style - Usually this consists of underline , and strike
  6. Text alignment - text alignment, usually consisting of, center, justify, right/end, start/left
  7. Text direction - from left to right or right to left
  8. Line height - line height in each paragraph
  9. Letter spacing - or space per letter.
  10. Heading - Representation of the title of a paragraph, heading/heading this usually has a composition of 1 to 6.
  11. Paragraph
  12. 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.

Next Article (Getting Started)
Content Navigation