버튼 섹션에는 동일한 레이아웃을 사용하는 3개의 열(텍스트 행 위의 아이콘)이 있습니다. 이 행의 열 간격은 균일하고 텍스트와 아이콘은 기본 색상으로 칠해집니다. 각 열을 작성하는 코드는 거의 동일하므로 buildButtonColumn()이라는 이름의 전용 도우미 메서드를 만듭니다. 이 메서드는 색상, 아이콘 및 텍스트를 사용하고 해당 위젯이 지정된 색상으로 칠해진 열을 반환합니다. ... @override Widget build(BuildContext context) { // ··· } Column _buildButtonColumn(Color color, IconData icon, String label) { return Column( mainAxisSize: MainAxisSize.min, mainA..

제목 행 구현 먼저 제목 섹션의 왼쪽 열을 만듭니다. final Widget titleSection = Container( padding: const EdgeInsets.all(32), child: Row( children: [ Expanded( /*1*/ child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ /*2*/ Container( padding: const EdgeInsets.only(bottom: 8), child: const Text( 'Oeschinen Lake Campground', style: TextStyle( fontWeight: FontWeight.bold, ), ), ), Text( 'Kandersteg..

우리가 배우게 되는 것 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) {..

Common layout widgets Standard 위젯과 Material 위젯으로 나눈다. 모든 앱은 위젯 라이브러리를 사용할 수 있지만 Material 앱만 Material Components 라이브러리를 사용 Standard widgets Container :위젯에 패딩, 여백, 테두리, 배경색 또는 기타 장식을 추가합니다. 패딩, 여백, 테두리 추가 배경색 또는 이미지 변경 단일 하위 위젯을 포함하고 하위는 행, 열 또는 위젯 트리의 루트일 수 있다. container_widget.dart import 'package:flutter/material.dart'; class ContainerWidget extends StatelessWidget { const ContainerWidget({supe..

Flutter 레이아웃 메커니즘의 핵심은 위젯입니다. 두 번째 스크린샷은 각 열에 아이콘과 레이블이 포함된 3열 행을 보여주는 시각적 레이아웃을 표시합니다 다음은 이 UI의 위젯 트리 다이어그램입니다. 보이는 위젯 생성하기 Layout widget 인 Center 를 이용하여 Text 위젯을 중앙에 위치하도록 하기 lib/layout/add_visible_widget_with_layout.dart import 'package:flutter/material.dart'; class VisibleWidgetWithLayout extends StatelessWidget { const VisibleWidgetWithLayout({Key? key, this.contents}) : super(key: key); fi..

제스처 처리 사용자의 입력 제스처를 감지 하여 처리 하는 방법. 간단한 버튼을 만들어 확인해 보겠다. lib/basic_widget/gesture.dart import 'package:flutter/material.dart'; class GestureButton extends StatelessWidget { const GestureButton({super.key}); @override Widget build(BuildContext context) { return GestureDetector( onTap: () { print('MyButton was tapped!'); }, child: Container( height: 50.0, padding: const EdgeInsets.all(8.0), margin..