[실습] Stateful Widget

Stateful Wiget 빠르게 만드는 법

stful 만쳐도 자동완성으로 생성가능

 

 stless 로 Steteless Widget 도 자동생성 가능 

또한, Stateless Widget -> Stateful Widget 으로 변경도 쉬움 

: Convert to StatefulWidget

 

 

Stateless Widget의 경우 빌드가 한번만 되고 변경되면 재생성 하므로, 

color 라는 변수가 있을때, color: color 로 해주면 된다. 

class _HomeScreen extends StatelessWidget {
  final Color color;

  const _HomeScreen({
    required this.color,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      height: 50.0,
      color: color, // color
    );
  }
}

 

 

Stateful Widget의 변수 값이 변경됐을때 반영법 : widget.~~~

 

State에서는 상태값 color 가 State 생성과 상관없이 변경될수 있으므로, 

 Widget의 color값을 가져와야 한다. 

때문에, widget.color 로 선언하면, Widget의 color를 가져올수있다.

class HomeScreen extends StatefulWidget{
  final Color color;
  const HomeScreen({
    required this.color,
    Key? key,
}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _HomeScreenState();     // state 와 바인딩이 돼서 외부에서 사용못하게 하기위해 private 로 설정한다.
  }
}

class _HomeScreenState extends State<HomeScreen>{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      height: 50.0,
      color: widget.color, // widget의 color를 가져옴
    );
  }
}

 

 

GestureDetector 는 child 에 감싸져있는 위젯만 제스처를 감지할 수있게 해준다.

state 는 사라지지 않고 새로 생긴 위젯이 붙기 때문에 값이 바뀌지 않는다!