[flutter] input 값에 따라 disabled 시키기

강의를 열심히 보다가 너무 간편하게 설명이 되어 복습겸 블로그에 정리를 해야겠다

내가 구현하고 싶은 것

• textinput과 button
• input값이 없으면 disabled 시키고 값이 들어서면 변경시키기

 

1. 기본 TextField와 button을 만든다

Column(
	children:[
    	TextField(
     		decoration:InputDecoration(
            	hintText : "이름을 입력하세요",
            )
        ), 
        FractionallySizedBox(
        	widthFactor:1,
            decoration:BoxDecoration(
            	color: Colors.pink,
            ),
            child: Text("다음"),
        )
    ]
)

 

2. controller를 만들어준다

final TextEditingController _usernamecontroller = TextEditingController();
String _username = ""; //기본 input값은 빈값

3. initState()에 적용?시켜주고 연결해준다

@override
  void initState() {
    super.initState();
    _usernamecontroller.addListener(() {
      setState(() {
        _username = _usernamecontroller.text;
      });
    });
  }
  ///
  /
   TextField(
        controller: _usernamecontroller,
        ...
	), 
    FractionallySizeBox(
    	decoration:BoxDecoration(
        	color:_username.isEmpty ? Colors.grey : Colors.pink
        )
        ...
    )

 

4. 전체 코드

import 'package:flutter/material.dart';

class Screen extends StatefulWidget {
  const Screen({super.key});

  @override
  State<Screen> createState() => _ScreenState();
}

class _ScreenState extends State<Screen> {
  final TextEditingController _usernamecontroller = TextEditingController();
  String _username = "";
  @override
  void initState() {
    super.initState();
    _usernamecontroller.addListener(() {
      setState(() {
        _username = _usernamecontroller.text;
      });
    });
  }

  @override
  void dispose() {
    _usernamecontroller.dispose();
    super.dispose();
  }

  void _Next() {
    if (_username.isEmpty) return;
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const NextScreen(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextField(
            controller: _usernamecontroller,
            decoration: const InputDecoration(
              hintText: "이름을 입력하세요",
            ),
          ),
          GestureDetector(
            onTap: _Next,
            child: FractionallySizedBox(
              widthFactor: 1,
              child: AnimatedContainer(
                duration: const Duration(
                  microseconds: 300,
                ),
                decoration: BoxDecoration(
                  color: _username.isEmpty ? Colors.grey.shade400 : Colors.pink,
                ),
                child: const Text("다음"),
              ),
            ),
          ),
        ],
      ),
    );
  }
}