iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Mobile Development

30天 - Flutter 日常系列 第 29

[Day29] Flutter - Presentation Click Game Screen (part13)

前言

Hi, 我是魚板伯爵今天要來創建一個CountBloc,然後就可以開始製作我們的CountButton了,我加了讓數字有彈跳的效果寫了一些動畫,有興趣的可以看原本程式碼。

完整程式碼

需要具備知識

CountBloc

創建一個CountBloc,把我們的按鈕畫面放進去。

...
BlocProvider(
    create: (context) => CountBloc(
      countRepository: CountRepository(),
    ),
    child: CountButton(),
),
...

然後創建一個BlocBuilder來檢查每次累加數字的狀態。

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CountBloc, CountState>(
      builder: (context, state) {
        return AnimatedContainer(
          .....
        );
      },
    );
  }

在按下按鈕時觸發CountIncrementEvent的事件,並將我們現在count的數字傳進去做累加。

...
  Material(
    color: Colors.transparent,
    child: InkWell(
      highlightColor: Colors.transparent,
      splashColor: Colors.transparent,
      onTap: () => _tapUp(), // onTapUp
      onTapDown: (TapDownDetails details) => _tapDown(state.count),
    ),
  ),
...
...
  void _tapDown(int count) {
    _animationController.forward();
    HapticFeedback.heavyImpact();
    BlocProvider.of<CountBloc>(context).add(CountIncrementEvent(count));
  }
...


上一篇
[Day28] Flutter - Application Click Game (part12)
下一篇
[Day30] Flutter - App Icon(final)
系列文
30天 - Flutter 日常30

尚未有邦友留言

立即登入留言