Flutter- Widget

플러터는 클래스를 통해서 위젯을 선언한다.

그렇다면 위젯이 뭘까?

위젯

위젯은 플러터 앱의 모든 시각적 요소를 표현하는 역할을 한다.

버튼, 텍스트, 이미지 등 사용자 인터페이스의 모든 요소는 위젯으로 표현되며 플러터에서는 모든 것이 위젯이다.

위젯 종류

플러터에서의 위젯은 크게 두가지로 구분된다.

• Stateful Widget
• Stateless Widget

 Stateless Widget

Stateless Widget의 경우 어떠한 상태도 가지고 있지 않은 정적인 위젯으로 어떠한 상태값도 가지고 있지 않기 때문에 Stateless Widget은 화면에서 어떠한 움직임이나 변화를 가지지 않는다.

• 예: 텍스트, 이미지

Stateless Widget은 StatelessWidget을 상속하여 생성한다. StatelessWidget을 상속받은 클래스는 반드시 build() 메서드를 오버라이드 해 구현하여야 한다.

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  // stateless widget: 화면에 무언가를 띄어주는 역할

  @override
  Widget build(BuildContext context) {
    // 모든 위젯들은 반드시 build 메서드를 구현해야한다.
    return MaterialApp(
      // 구글 스타일 위젯 (이게 더 좋음)
      home: Scaffold(
        // Scaffold widget: 화면의 구성요소에 관한 것들을 가지고 있다. ex) appBar 화면 상단 부분, body 바디를 구성
        appBar: AppBar(
          title: Text("Hello flutter!"),
        ),
        body: Center(
          child: Text("hello world!"),
        ),
      ),
    );
    // return CupertinoApp() 애플 스타일 위젯
  }
}

build() 메서드는 또다른 위젯을 반환해야한다. 반환값으로는 MaterialApp(), CupertionApp()이 존재한다.

• MaterialApp() : 구글 스타일의 위젯으로 CupertionApp()에 비해서 퀄리티가 높아서 주로 사용한다. 
• CupertinoApp() : 애플 스타일의 위젯이다.

 Stateful Widget

 Stateful Widget은 어떤 상태값을 가지고 있으며, 해당 상태값에 의해 화면에 움직임이나 변화를 표현할 때 사용하는 위젯이다.

• 예: 텍스트 필드, 버튼, 서버에서 전달받은 값을 화면에 표시하는 위젯 등

결국 Stateful Widget은 사용자의 인터렉션에 의해서 변화하는 상태를 가진 위젯을 의미한다. 이를 사용하기 위해선 StatefulWidget 클래스를 상속받아서 사용한다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatefulWidget {
  //StatefulWidget을 상속받은 경우 필수적으로 구현, 커스텀 state를 반환한다.
  @override
  _HomeWidgetState createState() => _HomeWidgetState();  
}

class _HomeWidgetState extends State<HomeWidget> {
  int counter = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stateful Widget')),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () => setState(() => {counter++}),
                child: Icon(Icons.add)),
            Container(
              child: Text('$counter'),
              margin: EdgeInsets.fromLTRB(30.0, 0.0, 30.0, 0.0),
            ),
            ElevatedButton(
                onPressed: () => setState(() => {counter--}),
                child: Icon(Icons.remove)),
          ],
        ),
      ),
    );
  }
}

StatefulWidget을 상속받은 경우 StatlessWidget과는 달리 createState() 메서드를 구현해야한다.

createState() 메서드는 State 클래스를 상속받은 커스텀 State를 반환해야한다.