|
| 1 | +--- |
| 2 | +title: "(Flutter) UI - 2.1. Layouts" |
| 3 | +categories: |
| 4 | + - Flutter |
| 5 | +tags: |
| 6 | + - Flutter |
| 7 | + - layout |
| 8 | +comments: true |
| 9 | +--- |
| 10 | + |
| 11 | +> ### UI 목차 |
| 12 | +> - Introduction to widgets |
| 13 | +> - Building layouts |
| 14 | +> - Layouts in Flutter |
| 15 | +> - Tutorial |
| 16 | +> - Creating responsive apps |
| 17 | +> - Box constraints |
| 18 | +>- Adding interactivity |
| 19 | +>- Asserts & Images |
| 20 | +>- Navigation & routing |
| 21 | +>- Animations |
| 22 | +> - Introduction |
| 23 | +> - Overviews |
| 24 | +> - Tutorial |
| 25 | +
|
| 26 | +# Layouts |
| 27 | +<https://flutter.dev/docs/development/ui/layout> |
| 28 | + |
| 29 | +## 들어가기 전에 |
| 30 | +- 위젯은 UI를 만들때 사용하는 클래스다 |
| 31 | +- 위젯은 layout 과 UI 구성요소 모두에 사용된다 |
| 32 | +- Flutter layout 메카니즘의 핵심은 widget 이다 |
| 33 | +- Flutter에서 거의 모든 것은 widget 이다 |
| 34 | +- 심지어 layout modes 도 widgets 이다 |
| 35 | +- 보이는 것(images, icons, text ...) 뿐 아니라 보이지 않는 것(rows, columns, grids ...)도 widget이다 |
| 36 | + |
| 37 | +(예) |
| 38 | + |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +- 위 예에서 Container는 그 아래 child widget을 customize할 수 있게 하는 widget class이다 |
| 43 | + - padding, margins, borders, background color 등을 추가하길 원할 때 container를 사용한다 |
| 44 | + - 위 예에서는 각각의 Text widet이 margins을 추가하기 위해 Container가 감싸고 있다 |
| 45 | + - 또한 전체 Row(행)은 row 주위에 padding을 추가하기 위해 Container가 감싸고 있다 |
| 46 | +.... |
| 47 | + |
| 48 | +## Lay out a widget |
| 49 | +### 1. Select a layout widget |
| 50 | +### 2. Create a visible widget |
| 51 | +### 3. Add the visible widget to the layout widget |
| 52 | +### 4. Add the layout widget to the page |
| 53 | +- Flutter app 자체로 하나의 widget 이다 |
| 54 | +- 대부분의 widget은 `build()` 메소드를 가지며, 인스턴스화하여 widget을 display 한다 |
| 55 | + |
| 56 | +#### Material apps |
| 57 | +- Material app 을 위해 Scaffold widget을 사용할 수 있다 |
| 58 | + |
| 59 | +##### Scaffold(발판, 골격, 비계) widget |
| 60 | +- default banner, background color, API for adding drawers, snack bars, bottom sheets 를 제공한다 |
| 61 | +- body 속성에 직접 Center widget을 추가할 수 있다 |
| 62 | + |
| 63 | +```flutter |
| 64 | +class MyApp extends StatelessWidget { |
| 65 | + @override |
| 66 | + Widget build(BuildContext context) { |
| 67 | + return MaterialApp( |
| 68 | + title: 'Flutter layout demo', |
| 69 | + home: Scaffold( |
| 70 | + appBar: AppBar( |
| 71 | + title: Text('Flutter layout demo'), |
| 72 | + ), |
| 73 | + body: Center( |
| 74 | + child: Text('Hello World'), |
| 75 | + ), |
| 76 | + ), |
| 77 | + ); |
| 78 | + } |
| 79 | +} |
| 80 | +``` |
| 81 | + |
| 82 | +#### Non-Material apps |
| 83 | +- Non-Material app의 경우 Center widget을 app의 build () 메소드에 추가 할 수 있다 |
| 84 | +``` |
| 85 | +class MyApp extends StatelessWidget { |
| 86 | + @override |
| 87 | + Widget build(BuildContext context) { |
| 88 | + return Container( |
| 89 | + decoration: BoxDecoration(color: Colors.white), |
| 90 | + child: Center( |
| 91 | + child: Text( |
| 92 | + 'Hello World', |
| 93 | + textDirection: TextDirection.ltr, |
| 94 | + style: TextStyle( |
| 95 | + fontSize: 32, |
| 96 | + color: Colors.black87, |
| 97 | + ), |
| 98 | + ), |
| 99 | + ), |
| 100 | + ); |
| 101 | + } |
| 102 | +} |
| 103 | +``` |
| 104 | + |
| 105 | +## Lay out multiple widgets vertically and horizontally |
0 commit comments