[Flutter 문법]StatefulWidget parameter 넘겨주기

Flutter에는 StatelessWidget 이랑 StatefulWidget이 있다.

 

Stateless

이둘의 차이점으로 간단하게 설명하자면 화면이 렌더링 될 때 변경이 되지 않는 것을 Stateless로 한다.

이벤트, 상호작용에 동작하지 않는 위젯들을 사용한다.

 

Stateful

Stateful은 less와 다르게 동적인 위젯을 다룰때 사용한다 사용자가 버튼을 눌러서 실행이 된다거나 이벤트가 일어난다 등

화면을 랜더링 하면서 움직임을 가져오고 상호작용이 되는 위젯들을 사용한다.

 

Stateful parameter 사용법

여기서 오늘 기억해야 할 부분은 Stateful을 사용할 때  매개변수를 가져오려면 widget.파라미터이름으로 가져와 사용할 수 있다. 

밑에 예시

class Home extends StatefulWidget {
  const Home({Key? key, this.data, this.setUserContent, this.addMyData}) : super(key: key);
  final data;
  final setUserContent;
  final addMyData;

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  var scroll = ScrollController(); // 스크롤 정보들을 가져옴

  @override
  void initState() {
    super.initState();
    scroll.addListener(() { // addListener : 왼쪽 변수가 변할때마다 실행 해줌
      if (scroll.position.pixels == scroll.position.maxScrollExtent){ // 맨 밑까지 스크롤 했을 때 
         // getMore();// 게시물 더가져오기
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    if (widget.data.isNotEmpty){ // 데이터 로딩이 되면 보여줌
      return ListView.builder(itemCount: 3,controller: scroll,itemBuilder: (c,i){
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            GestureDetector(
              child: Hero(
                tag: 'imageHero',
                child:
                widget.data[i]['image'].runtimeType == String // runtimeType : 타입
                    ? Image.network(widget.data[i]['image'])
                    : Image.file(widget.data[i]['image']),
              ),
              onTap: () {
                Navigator.push(context, CupertinoPageRoute(builder: (_) {
                  return Scaffold(
                    body: GestureDetector(
                      child: Center(
                        child: Hero(
                          tag: 'imageHero',
                          child:
                          widget.data[i]['image'].runtimeType == String // runtimeType : 타입
                              ? Image.network(widget.data[i]['image'])
                              : Image.file(widget.data[i]['image']),
                        ),
                      ),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                  );
                }));
              },
            ),

             // 웹 이미지주소
            GestureDetector(
              child: Text(widget.data[i]['user']),
              onTap: (){
                Navigator.push(context,
                  PageRouteBuilder(
                      pageBuilder: (c,a1,a2) => Profile(),
                      transitionsBuilder: (c,a1,a2,child) => // a1이 제일중요 = animation objcet 페이지 전환 얼마나 되었는지 0~1 부터 알려준다 페이지 전환 시작 0 중간쯤이면 0.5 다되면 1
                          FadeTransition(opacity: a1,child: child), // opacity 에 a1을 넣어서 fadein 효과
                      transitionDuration: Duration(milliseconds: 500) // 애니메이션 동작 솓ㅅ
                      // 애니메이션 위젯 FadeTransition에 입력하면 된다.
                  )
                );
              },
              
            ),
            Text('좋아요 ${widget.data[i]['likes']}'),
            Text('날짜 : ${widget.data[i]['date']}'),
            Text(widget.data[i]['content']),
          ],
        );
      });
    }else{
      return Text('로딩중'); // 데이터가 들어오기전 에 보여줌
    }
  }
}