Flutter Building layouts Tutorial

Building layoutsFlutter Building layouts Tutorial

 

Flutter layout Widget을 이용하여 위와 같은 App화면 만들기!

 

 

---

 

0. 기본 코드로 앱 만들기

 

 

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter layout demo'),
      ),
        body: Center(
          child: Text('Hello World'),
        ),
      )
    );
  }
}
 
 
 
 

---

1. 레이아웃 분석하기

 

 

 

위의 화면은 크게 4개 부분의 Column으로 이루어져있다.

1번 이미지, 2번,3번 아이콘과 텍스트, 4번 텍스트

 

 

 

 

 

2번의 경우 3개의 children이 있다. text, star icon, number.

text child의 경우 Column으로 두 줄의 text가 있다. Column은 빈 공간을 차지하기 위해 Expanded widget을 사용해야한다.

 

3번의 경우 3개의 children이 있으며, Column으로 아이콘과 텍스트가 들어가 있다.