Flutter

기본 Layout 예제 만들기 (1)

yogingang 2022. 6. 6. 00:00
반응형

우리가 배우게 되는 것

  • Flutter의 레이아웃 메커니즘이 작동하는 방식.
  • 위젯을 세로 및 가로로 배치하는 방법.
  • Flutter 레이아웃을 구축하는 방법.

 

우리가 만들어 볼 것

 

1. 기본 코드 만들기

Hello World Flutter 앱을 만들기

https://yogingang.tistory.com/243

 

lib/main.dart 의 내용을 아래와 같이 변경해 봅시다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

그리고 기본적인 title 을 변경해 봅시다. 

import 'package:flutter/material.dart';

class StepZero extends StatelessWidget {
  const StepZero({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title: 'Welcome to Flutter',
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          // title: const Text('Welcome to Flutter'),
          title: const Text('Flutter layout demo'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

 

 

 

2. 레이아웃 다이어그램

레이아웃을 기본요소로 나눕시다.

 

  • 행과 열을 식별합니다.
  • 레이아웃에 그리드가 포함되어 있습니까?
  • 겹치는 요소가 있습니까?
  • UI에 탭이 필요합니까?
  • 정렬, 패딩 또는 테두리가 필요한 영역을 확인합니다.

먼저 더 큰 요소를 식별합니다. 이 예에서는 이미지, 행 2개, 텍스트 블록 등 4개의 요소가 열로 정렬됩니다.

요소 빨간 원

 

다음으로 각 행을 도표화 하자

 제목 섹션이라고 하는 첫 번째 행에는 텍스트 열, 별표 아이콘 및 숫자라는 3개의 하위 항목이 있습니다. 첫 번째 자식인 열에는 2줄의 텍스트가 있습니다. 첫 번째 열은 많은 공간을 차지하므로 Expanded 위젯으로 래핑되어야 합니다.

 

Button 섹션이라고 하는 두 번째 행에도 3개의 자식이 있습니다. 각 자식은 아이콘과 텍스트를 포함하는 열입니다.

레이아웃을 도표화한 후에는 이를 구현하기 위해 상향식 접근 방식을 취하는 것이 가장 쉽습니다. 깊게 중첩된 레이아웃 코드의 시각적 혼란을 최소화하려면 일부 구현을 변수와 함수에 배치합니다.

 

 

 

관련영상

https://youtu.be/1UjR-zTIbx4

 

 

반응형