플루터(Flutter) Stateless Widget + Show Content Action

Stateless Widget?

상태가 변하지 않는 위젯을 말합니다. 

한번 만들어지면 화면이 변경되지 않고 그대로 유지되는 위젯 입니다. 

사용자가 어떤 액션을 하더라도 내부 데이터가 변경되지 않기 때문에 다시 그릴 필요 없습니다. 

한 번 화면에 보여지면 변하지 않는 영역을 담당 합니다. 

 

우리가 기존에 있던 소스가 정적이라고 가정하고 Stateless Widget 적용해보도록 하겠습니다. 

Widget 타입을 반환하는  클래스를 하나 생성하고 StatelessWidget 클래스를 상속 받습니다. 

해당 클래스가 호출될 경우 build 함수가 동작하면서 UI에 랜더링 됩니다. 

import 'package:flutter/material.dart';

void main() {
  print('✅ main() 함수가 실행되었습니다');

  runApp(
      MaterialApp(
        home: staticWidget(),
      ),
  );
}

class staticWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.green,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('asset/image/memoryman.jpg'),
            CircularProgressIndicator(
              color: Colors.white,
            )
          ],
        )
    );
  }
}

 

override 

상속받은 기능을 내 방식으로 다시 정의하는 것.

 

장점

Stateless Widget의 가장 큰 장점은 Hot Reload 사용이 가능하다는 점 입니다. 

기존에는 코드를 수정하고 항상 앱을 재실행했어야 했는데요. 

아래 처럼 코딩하고 ctrl + s 저장해보시면 바로 반영되는걸 볼 수 있습니다. 

padding은 css에도 있는 개념으로 여백을 의미 합니다. 

import 'package:flutter/material.dart';

void main() {
  print('✅ main() 함수가 실행되었습니다');

  runApp(
      MaterialApp(
        home: staticWidget(),
      ),
  );
}

class staticWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.green,
        body: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 50,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('asset/image/memoryman.jpg'),
              CircularProgressIndicator(
                color: Colors.white,
              )
            ],
          ),
        )
    );
  }
}

 

Show Content Action

개발을 하다보면 유용한 단축키가 존재하는데요. 

show content action이 그 유용한 기능으로 Alt + Enter 조합입니다. 

그 중 Remove this widget은 선택된 widget을 삭제하는 기능으로 한번의 선택으로 줄바꿈 및 다른 widget 삭제할 걱정을 하지 않아도 됩니다. 

 

반대로 Wrap with widget과 Wrap with Padding은 상단에 자연스럽게 widget을 생성해줍니다.