flutter(dart)

flutter(3)- InputField안에 label과 hintText 2개 이상 사용하기

칠구의 스터디 2023. 11. 2. 15:59

 

위의 화면처럼 하나의 InputField안에 label과 hintText 2개 이상 적용되도록 구현해 보았다.

 

 

class InputField extends StatelessWidget {
  final String title;
  final List<String> labels; //라벨 2개를 사용하기 위함
  final List<String> hintTexts; // 힌트텍 2개를 사용하기 위함

//이것도 중요요소
  InputField(
      {required this.title, required this.labels, required this.hintTexts});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: TextStyle(fontSize: 12, fontWeight: ㅊㅋㅌFontWeight.bold),
        ),
        for (int i = 0; i < labels.length; i++) //반복문을 사용함으로써 2개 이상 사용가능
          Column(
            children: [
              Text(
                labels[i],
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              TextField(
                decoration: InputDecoration(
                  hintText: hintTexts[i],
                  border: OutlineInputBorder(),
                ),
              ),
            ],
          ),
      ],
    );
  }
}

일단 위의 코드를 사용해야 한다. list함수와 반복문을 사용함으로써 2개 이상 사용 가능하도록 함

 

children: [
              InputField(
                //class InputField 적용해야 이렇게 사용 가능!!
                title: '현재 비밀번호',
                labels: ['', ''],
                hintTexts: ['현재 비밀번호 입력', '현재 비밀번호 확인'],
              ),
              SizedBox(height: 20), //간격 벌리기 용
              InputField(
                title: '새 비밀번호',
                labels: ['', ''],
                hintTexts: ['새로운 비밀번호 입력', '새로운 비밀번호 확인'],
              ),

이어서 이 코드를 사용해서 맨 첨그림처럼 보이게 구현하였다.

기존과 다른점이 있다면 라벨과 힌트텍스트에 S가 붙어서 2개 이상 사용이 가능하다.  

타이틀 말고도 라벨에 텍스트를 추가하고싶다면   labels: ['', ''], 이 부분에 원하는 텍스트를 넣으면 된다.