Flutter Wrap 위젯 사용 팁: option(⌥)+enter 단축키 활용하기

option(⌥)+ enter : 감싸는 구조(Wrap) 만들거나 제거할때 활용

1. Introduction

Flutter에서는 Wrap 위젯을 많이 사용하는 것 같다. 왜냐하면 화면의 모든 요소 자체가 위젯이다 보니, 배치를 할때 Column, Row, Container 등을 적절하게 혼재해서 사용해야 하기 때문이다.

 

하지만 실제로 VS Code 또는 Android Studio로 코드를 짜는 경우 새롭게 Wrap 을 하는 것 자체가 쉽지 않은 작업이다.

 

괄호가 많고 자칫 잘못했다가 코드에서 에러가 발생하기 쉽상이기 때문이다.

 

그래서 Wrap 을 하기 위해서는 option 키와 enter 키를 같이 누르게 되면 해당 위젯에 대해 어떤 식으로 감쌀 것인지, 또는 감싸져 있는 부분을 제거할 것인지 선택을 할 수가 있다.

 

아래 그림 참조.

 

이렇게 코드를 작성하면 다음과 같은 코드에서 새롭게 위젯들을 추가하고 넣는 작업이 편리해진다.

 

Flutter 실습으로 다음 4가지에 대해서 알아보자.

 

2. To Study

- MaterialApp에서 appBarTheme에서 backgroundColor 속성과 titleTextStyle 속성에서 색상과 폰트 사이즈 수정하기

[Stateless Widget]

- Scafford 사용하기

- Center, Column, Row 를 사용하고 mainAxisAlignment 사용하여 정렬 맞춰보기

- 변수를 활용하여 동적으로 카운팅하는 값 만들어보기

 

 

실습 파일 : main.dart

 

아래 일부 코드.

 

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        // appBar 색상 변경
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.blue, // appBar 전체 색상 파란색
          titleTextStyle: TextStyle(
              color: Colors.black,
              fontSize: 25.0, // 폰트 사이즈 기본 사이즈의 2.5배
          ), // title 텍스트 색상 검정색
        )
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
                '$count',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 100,
                )),
            Text(
                '$count',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 70,
                )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 화면 갱신
          setState(() {
            count++;
          });
        },
        child: Icon(Icons.add_box_outlined)
      ),
    );
  }
}

 

- MaterialApp에서 appBarTheme에서 backgroundColor 속성과 titleTextStyle 속성에서 색상과 폰트 사이즈 수정하기

[Stateless Widget]

 

우선적으로 MaterialApp은 플러터의 최상위 위젯 중 하나이다.

기본적인 레이아웃의 설정을 여기서 정의할 수 있는데, 아래 구성 요소들이 있다.

순서	구성 요소	설명
1	title	앱의 이름이나 제목을 지정합니다. 이것은 앱을 시작할 때 표시되는 기본 앱 바에 표시됩니다.
2	home	의 기본 홈 페이지를 지정합니다. 이것은 앱이 시작될 때 표시되는 첫 번째 화면입니다.
3	theme	앱의 전반적인 테마를 지정합니다. 색상 스키마, 폰트 스타일, 아이콘 테마 등을 설정할 수 있습니다.
4	routes	앱 내부의 다양한 화면을 관리하기 위한 라우트 맵을 정의합니다. 각 라우트는 화면 위젯과 연결됩니다.
5	initialRoute	앱이 처음 시작될 때 표시할 초기 라우트를 지정합니다.
6	onGenerateRoute	라우팅이 필요할 때 호출되는 함수를 지정합니다. 일반적으로 이 함수는 동적으로 라우트를 생성하고 반환하는 데 사용됩니다.
7	locale	로케일을 설정하여 앱의 언어 및 지역화를 관리합니다.
8	supportedLocales	지원하는 로케일 목록을 정의합니다. 앱이 다국어를 지원하는 경우 사용됩니다.
9	기타 설정	debugShowCheckedModeBanner, navigatorObservers, home, builder, onUnknownRoute 등 다양한 앱 설정을 지정할 수 있습니다.

 

- Scafford 사용하기

여기서 Scaffold를 이용해서 전체 코드를 감싸는 구조로 코드를 작성했다.

 

 

그 이유는 일반적인 레이아웃 구조를 정의하며, 앱 바 (AppBar), 바텀 네비게이션 바 (BottomNavigationBar), 스낵바 (SnackBar) 및 FAB와 같은 기본 UI 요소를 쉽게 통합할 수 있어서이다. 또한 일반적으로 UI 요소를 일일이 구현하지 않고도 일반적인 앱 디자인을 빠르게 구축할 수 있고, 커스토마이징이 편리하다.

 

 

- Center, Column, Row 를 사용하고 mainAxisAlignment 사용하여 정렬 맞춰보기

Center로 맞췄기 때문에 화면 상에서 아래와 같이 가운데 부분에 위치할 수 있었고, 여기에서도 mainAxisAlignment 를 이용해 가운데 설정을 유지했다.

 

 

- 변수를 활용하여 동적으로 카운팅하는 값 만들어보기

변수는 사용할때, $ 를 사용해서 불러올 수 있다.

children: [
    Text(
        '$count',
        style: TextStyle(
          color: Colors.black,
          fontSize: 100,
        )),

 

3. Conclusion

Flutter에서 여러 기능을 활용해보고, 그 안에서 새로운 인사이트를 얻기 위해 다음과 같이 내용을 정리해서 기록합니다.