flutter) 위젯을 분리해보자

 

 

코드가 많아지면서

가독화, 재사용성을 위해서 분리해야한다.

 

플러터에서는 Class를 이용해 분리한다.

 

분리하는 방법에 대해서 알아보자

 

---

flutter에서 class 분리를 하기 위해

하나의 클래스만 바라보는 듯 하다

고것이 바로

statelessWidget 클래스이다.

 

커스텀 클래스를 만들기 위해서는

statelessWidget을 무조건 상속한 뒤

build라는 메소드를 오버라이딩 하여 사용해야한다.

 

하나만을 보고 

오버라이딩 한다는 것은

빌드할 때 

플러터가 하나의 클래스만 보고

추가로 위젯을 만들면 되니 편하니까 그런 듯 하다!

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        body: GradientContainer(),
      ),
    ),
  );
}

class GradientContainer extends StatelessWidget {
  @override
  Widget build(context) {
    return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.blue, Colors.red],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight)),
      child: Center(
        child: Text(
          'Hello World!',
          style: TextStyle(fontSize: 28, color: Colors.white),
        ),
      ),
    );
  }
}

 

 

 

커스텀 클래스를 하기위해서는 두가지만 기억하자

1. statelessWidget 상속하여 build 메소드 오버라이딩 하여 사용하기

2. return 안에 widget을 넣어 리턴해주기!