Flutter - CustomWidget + VoidCallback

StatelessWidget을 상속받아 커스텀 위젯을 만들 수 있습니다.

당연히 여러 방면에서 쓰일수 있고 전체 코드양을 줄이며 재활용 하기 편하기 떄문에 다른 언어에서도 많이 사용 하는 방법 입니다.

 

https://aostols.tistory.com/16?category=564017 

Flutter - StatelessWidget / StatefulWidget

기존 코드를 약간 변형해서 사용 해 봅시다.

 

import 'package:flutter/material.dart';
import 'package:test_project/CustomBUtton.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var textIndex = 0;
  var textArray = ['Hello World?', 'CustomButton Clicked'];

  void textChange() {
    setState(() {
      if (textArray.length > textIndex + 1) {
        textIndex = textIndex + 1;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('VoidCallBack Test'),
          ),
          body: Column(
            children: [
              Text(textArray[textIndex]),
              CustomButton(textChange),
            ],
          )),
    );
  }
}

 

대충 비슷한 구조인데 CustomButton 이라는 부분이 import되고 body 하단에서 사용되고 있습니다.

 

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final VoidCallback _buttonCallBack;

  CustomButton(this._buttonCallBack);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ElevatedButton(
        child: Text('Custom Button'),
        onPressed: _buttonCallBack,
      ),
    );
  }
}

CustomButton 은 이렇게 생겼습니다.

StatelessWidget을 상속받았고 build 부분에는 Container속에 ElevatedButton 이 있습니다.

다만 특이한 점은 VoidCallback 이란 변수가 있고 이것을 onPressed에 연결 해 주었습니다.

 

이 부분은 main.dart 에 보면 textChange에 연결 되어 있는데 main 에 있는 함수를 끌고오는 기능 입니다.

커스텀 위젯을 만들게 되면서 상위 객체의 함수를 끌고 오고 싶을 경우 사용하게 됩니다.

 

final VoidCallback _buttonCallBack;

CustomButton(this._buttonCallBack);

CustomButton 내부에 보면 생성자에서 VoidCallback을 받는 생성자가 설정 되어 있습니다.

이 부분이 콜백을 받아 버튼에 연결하는 부분입니다.

 

만일 매개변수로 textIndex등의 값을 넘겨 주었다면 값이 복사가 되기 때문에 상위 객체의 값이 변경되지 않는 것을 볼 수 있습니다.

따라서 함수들을 전달 해 주어야 합니다.