Basic Elements - Shapes, Layout, Text

Flitter provides a widget system similar to Flutter, making it easy to build complex UIs. This document covers how to work with the most basic elements: shapes, layouts, and text.

Drawing Basic Shapes

In Flitter, shapes are created using the Container widget and BoxDecoration.

Container and BoxDecoration

Create various shapes and styles.

기본 도형들

// 사각형
Container({
  width: 80,
  height: 80,
  decoration: new BoxDecoration({
    color: '#3B82F6'
  })
})

// 둥근 사각형
Container({
  width: 80,
  height: 80,
  decoration: new BoxDecoration({
    color: '#10B981',
    borderRadius: BorderRadius.circular(16)
  })
})

// 원
Container({
  width: 80,
  height: 80,
  decoration: new BoxDecoration({
    color: '#F59E0B',
    borderRadius: BorderRadius.circular(40)
  })
})

고급 스타일링

💡 팁

• Container의 decoration 속성으로 다양한 도형을 만들 수 있습니다
• borderRadius로 모서리를 둥글게 만들 수 있습니다
• Border로 테두리를 추가할 수 있습니다
• 색상은 HEX('#3B82F6') 또는 RGBA('rgba(0,0,0,0.5)') 형식을 사용합니다

Container is the most basic yet powerful widget in Flitter:

Size setting: Specify size with width and height properties
Color: Set background color with color or decoration.color
Spacing: Set internal/external margins with padding and margin
Decoration: Add borders, rounded corners, shadows, etc. with BoxDecoration

Using BoxDecoration

Container({
  decoration: new BoxDecoration({
    color: '#3B82F6',
    border: new Border({
      top: new BorderSide({ color: '#1E40AF', width: 2 }),
      // right, bottom, left can be set the same way
    }),
    borderRadius: BorderRadius.circular(8),
    // or set individual corners
    borderRadius: BorderRadius.only({
      topLeft: Radius.circular(16),
      topRight: Radius.circular(16),
      bottomLeft: Radius.circular(0),
      bottomRight: Radius.circular(0)
    })
  })
})

Layout System

Flitter provides three main layout widgets.

Layout Widgets

Learn how to arrange widgets using Row, Column, and Stack.

결과

가로 방향으로 위젯을 배치합니다

코드

Row({
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container({ 
      width: 60, 
      height: 60, 
      decoration: new BoxDecoration({ color: '#3B82F6' }) 
    }),
    Container({ 
      width: 60, 
      height: 80, 
      decoration: new BoxDecoration({ color: '#10B981' }) 
    }),
    Container({ 
      width: 60, 
      height: 100, 
      decoration: new BoxDecoration({ color: '#F59E0B' }) 
    })
  ]
})

Expanded 위젯 활용

Expanded 위젯을 사용하면 남은 공간을 자동으로 채울 수 있습니다.

Row({
  children: [
    Container({ 
      width: 60, 
      height: 60, 
      decoration: new BoxDecoration({ color: '#3B82F6' }) 
    }), // 고정 너비
    SizedBox({ width: 8 }),
    Expanded({
      child: Container({ 
        height: 60, 
        decoration: new BoxDecoration({ color: '#10B981' }) 
      }) // 남은 공간 채우기
    }),
    SizedBox({ width: 8 }),
    Container({ 
      width: 60, 
      height: 60, 
      decoration: new BoxDecoration({ color: '#F59E0B' }) 
    }) // 고정 너비
  ]
})

📐 정렬 속성 이해하기

MainAxisAlignment (주축 정렬):

• start: 시작점에 정렬
• end: 끝점에 정렬
• center: 중앙 정렬
• spaceBetween: 요소 사이 균등 배치
• spaceEvenly: 전체 공간 균등 배치
• spaceAround: 요소 주변 균등 배치

CrossAxisAlignment (교차축 정렬):

• start: 시작점에 정렬
• end: 끝점에 정렬
• center: 중앙 정렬
• stretch: 교차축 방향으로 늘리기

Row and Column

Row arranges child widgets horizontally, while Column arranges them vertically:

// Horizontal arrangement
Row({
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // Main axis alignment
  crossAxisAlignment: CrossAxisAlignment.center,     // Cross axis alignment
  children: [/* widgets */]
})

// Vertical arrangement
Column({
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [/* widgets */]
})

Stack and Positioned

Stack is used to overlay widgets on top of each other:

Stack({
  children: [
    Container({ /* background */ }),
    Positioned({
      top: 10,
      left: 10,
      child: Container({ /* absolute positioning */ })
    })
  ]
})

Expanded and Flexible

Used to fill remaining space or distribute space proportionally:

Row({
  children: [
    Container({ width: 100 }), // Fixed width
    Expanded({
      flex: 2, // Takes 2x space
      child: Container({ /* fill remaining space */ })
    }),
    Expanded({
      flex: 1, // Takes 1x space
      child: Container({ /* fill remaining space */ })
    })
  ]
})

Text Handling

Flitter’s Text widget provides various styling and layout options.

Text Styling and Handling

Learn about various text styles and overflow handling methods.

텍스트 스타일링

Text('스타일이 적용된 텍스트', {
  style: new TextStyle({
    fontSize: 18,
    fontWeight: 'bold',
    fontStyle: 'italic',
    fontFamily: 'monospace',
    letterSpacing: 2,
    color: '#3B82F6'
  })
})

텍스트 정렬

텍스트 오버플로우 처리

// 자동 줄바꿈
Text('긴 텍스트가 자동으로 줄바꿈됩니다')

// 줄 수 제한과 말줄임표
Text('매우 긴 텍스트...', {
  maxLines: 2,
  overflow: TextOverflow.ellipsis
})

💡 텍스트 처리 팁

• TextStyle로 폰트 크기, 굵기, 색상 등을 설정할 수 있습니다
• textAlign으로 텍스트 정렬 방향을 설정합니다
• maxLines와 overflow로 긴 텍스트를 처리합니다
• Container의 너비를 설정하면 자동으로 줄바꿈이 됩니다
• letterSpacing으로 글자 간격을 조절할 수 있습니다

TextStyle Properties

Text('Styled text', {
  style: new TextStyle({
    fontSize: 18,          // Font size
    fontWeight: 'bold',    // Weight: 'normal', 'bold'
    fontStyle: 'italic',   // Style: 'normal', 'italic'
    fontFamily: 'Arial',   // Font family
    color: '#3B82F6',      // Color
    letterSpacing: 1.5,    // Letter spacing
    wordSpacing: 2.0,      // Word spacing
    height: 1.5,           // Line height
    decoration: 'underline' // 'none', 'underline', 'overline', 'lineThrough'
  })
})

Text Alignment and Overflow

Container({
  width: 200,
  child: Text('Long text goes here...', {
    textAlign: TextAlign.center,    // Alignment: left, right, center, justify
    maxLines: 2,                     // Maximum lines
    overflow: TextOverflow.ellipsis, // Overflow handling: clip, fade, ellipsis
  })
})

Practical Example: Creating a Card Component

Let’s create a card component using what we’ve learned so far:

Container({
  width: 300,
  padding: EdgeInsets.all(16),
  decoration: new BoxDecoration({
    color: '#FFFFFF',
    borderRadius: BorderRadius.circular(12),
    border: new Border({
      top: new BorderSide({ color: '#E5E7EB', width: 1 }),
      right: new BorderSide({ color: '#E5E7EB', width: 1 }),
      bottom: new BorderSide({ color: '#E5E7EB', width: 1 }),
      left: new BorderSide({ color: '#E5E7EB', width: 1 })
    })
  }),
  child: Column({
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Card Title', {
        style: new TextStyle({
          fontSize: 20,
          fontWeight: 'bold',
          color: '#1F2937'
        })
      }),
      SizedBox({ height: 8 }),
      Text('Card content goes here. It can include multiple lines of text.', {
        style: new TextStyle({
          fontSize: 14,
          color: '#6B7280'
        })
      }),
      SizedBox({ height: 16 }),
      Row({
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container({
            padding: EdgeInsets.symmetric({ horizontal: 12, vertical: 6 }),
            decoration: new BoxDecoration({
              color: '#3B82F6',
              borderRadius: BorderRadius.circular(6)
            }),
            child: Text('Action', {
              style: new TextStyle({
                fontSize: 14,
                color: '#FFFFFF',
                fontWeight: 'bold'
              })
            })
          })
        ]
      })
    ]
  })
})

Next Steps

Once you’ve mastered the basic elements, learn how to handle user input in the Basic Interactions section.

Summary

Container: Basic container with size, color, spacing, and decoration
BoxDecoration: Visual decorations like borders and rounded corners
Row/Column: Horizontal/vertical direction layouts
Stack: Widget overlaying
Text: Text with various styles and alignment options
Expanded: Fill remaining space

Hello World Basic Interactions