기본 위젯 (Widget)

Flutter 위젯은 React 에서 영감을 얻은 현대적인 프레임워크를 사용하여 구축되었습니다. 
핵심 아이디어는 위젯으로 UI를 구축한다는 것입니다. 
위젯은 현재 구성 및 상태가 주어지면 보기가 어떤 모양이어야 하는지 설명합니다. 
위젯의 상태가 변경되면 위젯은 해당 설명을 다시 작성하고 프레임워크는 기본 렌더 트리에서 한 상태에서 다음 상태로 전환하는 데 필요한 최소 변경 사항을 결정하기 위해 이전 설명과 비교합니다.

 

이제 기본 project 에서 Hello world! 를 표시해 보자

 

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

이 예에서 위젯 트리는 Center 위젯과 그 자식 위젯 Text 라는 두 개의 위젯으로 구성된다.

위에서 root 는 Center 가 되고 Flutter 는 root 가 화면 전체에 적용되도록 강제한다.

그래서 Text 인 Hello, world 가 화면 중앙에 표시되게 된다. 

그리고 여기서는 textDirection 을 통해 text 의 방향도 지정한다. 

 

 

 

(textDirection 의 ltr --> rtl 변경은 상위 위젯인 Center 때문에 느낌표만 위치가 바뀔것이다.

Center 를 없애고 Text 만 두면 상단 시계쪽에서 

상단 오른쪽 배터리 충전표시쪽으로 이동되는 것을 볼수 있다.)

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Text(
        'Hello, world!',
        textDirection: TextDirection.rtl,
      ),
  );
}

실행

 

기본 위젯

 

Text

응용 프로그램 내에서 스타일이 지정된 텍스트 실행을 만들 수 있습니다 .

 

Row,Column

가로( ) 및 세로( ) 방향 모두에서 유연한 레이아웃을 만들 수 있습니다.

이러한 객체의 디자인은 웹의 flexbox 레이아웃 모델을 기반으로 합니다.

 

Stack

위젯을 페인트 순서대로 서로 위에 배치할 수 있습니다. 그런 다음 Stack의 자식에 Positioned 위젯을 사용하여 스택의 위쪽, 오른쪽, 아래쪽 또는 왼쪽 가장자리를 기준으로 위치를 지정할 수 있습니다. 스택은 웹의 절대 위치 레이아웃 모델을 기반으로 합니다.

 

Container

직사각형 시각적 요소를 만들 수 있습니다. 컨테이너는 배경, 테두리 또는 그림자와 같은 BoxDecoration으로 장식할 수 있습니다. 컨테이너에는 크기에 여백, 패딩 및 제약 조건이 적용될 수도 있습니다. 또한 컨테이너는 행렬을 사용하여 3차원 공간에서 변환할 수 있습니다.

 

lib/basic_widget/my_scaffold.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece
    // of paper on which the UI appears.
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context) //
                  .primaryTextTheme
                  .headline6,
            ),
          ),
          const Expanded(
            child: Center(
              child: Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

class MyAppBar extends StatelessWidget {
  const MyAppBar({required this.title, super.key});

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Row is a horizontal, linear layout.
      child: Row(
        // <Widget> is the type of items in the list.
        children: [
          const IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child
          // to fill the available space.
          Expanded(
            child: title,
          ),
          const IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

MyAppBar 위젯은 왼쪽과 오른쪽 모두에서 패딩이 8, 높이가 56 pixel 인 컨테이너를 만듭니다.

컨테이너 내부에서 MyAppBar는 Row 를 사용하여 child 를  구성합니다.

Row 의 children 중 가운데 위치한 title 은 Expanded로 표시됩니다.

즉, 다른 자식이 사용하지 않은 남아 있는 사용 가능한 공간을 채우도록 확장됩니다.

여러 개의 Expanded 자식을 가질 수 있으며 Expanded에 대한 flex 인수를 사용하여

사용 가능한 공간을 소비하는 비율을 결정할 수 있습니다.

 

main.dart

import 'package:flutter/material.dart';
import 'basic_widget/my_scaffold.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: SafeArea(
        child: MyScaffold(),
      ),
    ),
  );
}

실행

 

 

이제 이미 만들어져 있는 Material Design 을 이용하여 code 를 다시 작성해 보자

lib/basic_widget/tutorial_home.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // Scaffold is a layout for
    // the major Material Components.
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: const Text('Example title'),
        actions: const [
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      // body is the majority of the screen.
      body: const Center(
        child: Text('Hello, world!'),
      ),
      floatingActionButton: const FloatingActionButton(
        tooltip: 'Add',
        onPressed: null, // used by assistive technologies
        child: Icon(Icons.add),
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter3/basic_widget/tutorial_home.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: SafeArea(
        child: TutorialHome(),
      ),
    ),
  );
}

실행

 

 

미묘하게 실행 화면이 다른것을 알수 있다. 앱바에는 그림자가 있고  search 버튼도 추가되어 있다.

Title 은 스타일을 자동 상속 하고 플로팅 액션 버튼도 하단 오른쪽에 추가 되었다. (+)

소스를 보면 AppBar 와 leading: 등 미리 정해놓은 여러 요소들과 특성들을 사용하고 있다.

 

 

 

관련영상

https://youtu.be/NXyCcBOf9Ls