[ Flutter ] Horizontal Scroll ListView, Global Key

 

OnBoarding에서 초기 설정을 처리하기 위해서

요일과 금액을 세팅해야 화면을 넘어가게 처리

 

그 과정에서 요일 선택에서 datePicker를 사용할까 하다가 요일만 필요하기에 새로운 방법을 고민하다가

Scroll ListView를 사용하기로 결정

 

그러면 ListView를 가로로 스크롤이 가능하여 선택 할 있다.

---

Scroll ListView

ListView에서 보여줄 리스트 초기화 및 선택값 초기화

final List<String> list =
      List.generate(31, (index) => (index + 1).toString());
  String selectedValue = "1";

 

ListView 에 Scroll기능을 추가할려면

scrollDirection을 추가해서 방향을 설정해주면 된다.

 

이후 GetstureDetector를 활용하여 선택한 리스트의 값으로 selectedValue에 값을 할당

이에 따라서 decoration도 selectedValue값에 따라서 변하게 처리

Container scrollDate() {
    return Container(
      height: 45.0,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: list.length,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  selectedValue = list[index];
                });
              },
              child: Container(
                width: 45.0,
                child: Container(
                  decoration: BoxDecoration(
                      color: list[index].toString() == selectedValue
                          ? mint
                          : Colors.white,
                      border: Border.all(color: mint, width: 0.5)),
                  child: Center(
                      child: Text(
                    list[index].toString(),
                    style: TextStyle(
                        color: list[index].toString() == selectedValue
                            ? Colors.white
                            : textColor,
                        fontSize: 13.0),
                  )),
                ),
              ),
            );
          }),
    );
  }

---

Global Key

화면에서 필수값을 입력안할시에 다시 해당 Input에 Focus를 하기 위해서 Global Key를 사용

Global Key를 사용하면 자식 컴포넌트의 함수를 부모 컴포넌트에서 실행 시킬 수 있다.

 

해당 Input값에 Focus를 하기 위해 FocusNode를 세팅

class IncomeBoardingState extends State<IncomeBoarding> {
  final TextEditingController _payController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
 }

 

Focus를 할 TextField에 focusNode를 추가

child: TextField(
        controller: _payController,
        focusNode: _focusNode,

void requestFocus() {
    FocusScope.of(context).requestFocus(_focusNode);
  }

 

그럼 이제 requestFocus함수를 실행하면 해당 TextField에 Focus가 잡히게 된다.

 

이제 OnBoarding에서 Done을 눌렀을때 값을 체크하여 focus를 해야하므로 부모 컴포넌트에서 해당 함수를 실행시켜줘야한다.

 

부모 컴포넌트에서 GlobalKey<자식컴포넌트 클래스 명>을 지정

final GlobalKey<IncomeBoardingState> _incomeBoardingKey =
      GlobalKey<IncomeBoardingState>();

 

해당 GlobalKey를 자식 컴포넌트와 연결

( onValueChanged 값은 자식 컴포넌트에서 변수에 담긴 값을 부모컴포넌트에 가져오기 위해 설정 )

PageViewModel(
            title: "설정하기",
            bodyWidget: IncomeBoarding(
                onValueChanged: _updatePayValue, key: _incomeBoardingKey),
          ),

 

그럼 currentState.함수() 이런식으로 자식컴포넌트의 함수를 실행 시킬 수 있다.

_incomeBoardingKey.currentState?.requestFocus();