Flutter 动态计算器功能插件 flutter_dynamic_calculator 的使用

flutter_dynamic_calculator 是一个用于轻松构建具有完全自定义能力的动态计算器的新插件。它将有助于创建自定义键盘或底部模态计算器。

默认样式

带有自定义样式的计算器

DynamicCalculator(
  theme: const CalculatorTheme(
    displayColor: Colors.black,
    displayStyle: const TextStyle(fontSize: 80, color: Colors.yellow),
    /*...*/
  ),
)

开始使用

要使用此插件，请在 pubspec.yaml 文件中添加 flutter_dynamic_calculator 作为依赖项。

dependencies:
  flutter_dynamic_calculator: 

然后在你的文件中导入库。

import 'package:flutter_dynamic_calculator/flutter_dynamic_calculator.dart';

查看 example 目录中的完整示例应用以了解如何使用 DynamicCalculator。

或者你可以像下面这样直接使用 DynamicCalculator。

DynamicCalculator(
  value: 123.45,
  hideExpression: true,
  onChanged: (key, value, expression) {
    /*...*/
  },
  theme: const CalculatorTheme(
    displayColor: Colors.black,
    displayStyle: const TextStyle(fontSize: 80, color: Colors.yellow),
  ),
)

完整示例

以下是一个完整的示例，展示了如何使用 flutter_dynamic_calculator 插件。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dynamic_calculator/flutter_dynamic_calculator.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          centerTitle: true,
          title: const Text('DynamicCalculator'),
        ),
        body: const SizedBox(
          width: double.infinity,
          child: CalcButton(),
        ),
      ),
    );
  }
}

class CalcButton extends StatefulWidget {
  const CalcButton({Key? key}) : super(key: key);

  [@override](/user/override)
  _CalcButtonState createState() => _CalcButtonState();
}

class _CalcButtonState extends State<CalcButton> {
  double? _currentValue = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    var calc = DynamicCalculator(
      value: _currentValue!,
      hideExpression: false,
      hideSurroundingBorder: true,
      showCalculatorDisplay: true,
      autofocus: true,
      onChanged: (key, value, expression) {
        setState(() {
          _currentValue = value ?? 0;
        });
        if (kDebugMode) {
          print('$key\t$value\t$expression');
        }
      },
      onTappedDisplay: (value, details) {
        if (kDebugMode) {
          print('$value\t${details.globalPosition}');
        }
      },
      theme: const CalculatorTheme(
        borderColor: Colors.transparent,
        borderWidth: 0.0,
        displayCalculatorRadius: 10.0,
        displayBackgroundColor: Colors.white,
        displayStyle: TextStyle(fontSize: 30, color: Colors.green),
        expressionBackgroundColor: Colors.black12,
        expressionStyle: TextStyle(fontSize: 14, color: Colors.black45),
        operatorColor: Colors.green,
        operatorStyle: TextStyle(fontSize: 24, color: Colors.white),
        commandColor: Colors.white,
        commandStyle: TextStyle(fontSize: 24, color: Colors.green),
        numColor: Colors.white,
        numStyle: TextStyle(fontSize: 24, color: Colors.black87),
      ),
    );

    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextFormField(
        controller: TextEditingController(text: _currentValue.toString()),
        enableInteractiveSelection: false,
        showCursor: false,
        readOnly: true,
        decoration: InputDecoration(
          contentPadding: const EdgeInsets.all(8.0),
          border: OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.green),
            borderRadius: BorderRadius.circular(10.0),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
            borderSide: const BorderSide(
              color: Colors.green,
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
            borderSide: const BorderSide(
              color: Colors.green,
              width: 1.0,
            ),
          ),
        ),
        onTap: () {
          showModalBottomSheet(
            isScrollControlled: true,
            backgroundColor: Colors.transparent,
            barrierColor: Colors.transparent,
            context: context,
            builder: (BuildContext context) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.8),
                      spreadRadius: 5,
                      blurRadius: 2,
                      offset: const Offset(0, 3), // 改变阴影位置
                    ),
                  ],
                ),
                child: SizedBox(
                  height: MediaQuery.of(context).size.height * 0.6,
                  child: Padding(
                    padding: const EdgeInsets.only(
                      top: 8.0,
                      bottom: 8.0,
                      left: 26.0,
                      right: 26.0,
                    ),
                    child: calc,
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}