[Flutter] 클릭 이벤트 처리와 화면 전환

일단 텍스트의 값을 받아야 한다.

플러터에서는 이런 컨트롤러를 사용해서 값을 받고, 그다음에 리소스낭비를 줄이기 위해 dispose메소드를 실행시켜야한다고 한다.

 

이런식으로 TextField에서 컨트롤러를 매핑하는 작업을 한다.

if(controller.text == 'smith' && controller2.text == '1234'){
Navigator.push(context,MaterialPageRoute(builder: (BuildContext context)=> Dice()));

 

실제로 값을 사용할 때는 이렇게 사용하면 된다.

그렇게 되면 controller.text로하면 텍스트 값을 가져오는 것이다.

 

일단 토스트 메시지 같은 메서드를 만들어준다

void showSnackBar2(BuildContext context){
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content:
      Text('로그인 정보 불 일치',textAlign: TextAlign.center,),
      duration: Duration(seconds: 2),
      backgroundColor: Colors.blue,
    )
  );
}

 

 

해당 메서드는 아래와 같이 사용한다.

if (controller.text == 'smith' &&
    controller2.text == '1234') {
  Navigator.push(context, MaterialPageRoute(
      builder: (BuildContext context) => Dice()));
}
else {
  showSnackBar2(context);
}

 

이렇게 하고 우선 대충 DIce를 만들고 화면 전환을 한다.

클릭시 이벤트는 이렇게 주면 된다.

onPressed: () {
  if (controller.text == 'smith' &&
      controller2.text == '1234') {
    Navigator.push(context, MaterialPageRoute(
        builder: (BuildContext context) => Dice()));
  }
  else {
    showSnackBar2(context);
  }
},

 

 

 

 

화면 전환을 위해서는 Builder widget을 써야한다.

Builder widget을 써야하는 이유는 아래와 같다.

 

Builder의 위젯은 context를 파라미터로 담는데

항상 토스트 메시지를 표시하거나, context를 사용하여, stateful한 동작을 할때는 이 위젯을 사용해야한다,

stateful, stateless한 위젯의 부모 위젯이라고 한다.

 

따라서 해당 위젯으로 변경해준 것이다.

 

기존 소스에서 대략 이렇게 변경되었다.

Widget build, BuilCOntext로 변경되었고

기존의 Scaffold를 return하게 되는 것이다.

 

class _LoginState extends State<Login> {
  TextEditingController controller = TextEditingController();
  TextEditingController controller2 = TextEditingController();



  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
        backgroundColor: Colors.redAccent,
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){},
        ),
      actions:<Widget> [
        IconButton(
          icon: Icon(Icons.search),