Flutter自定义计算器插件simple_custom_calculator的使用

特性

![1] ![2]

开始使用

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

dependencies:
  simple_custom_calculator:

在文件中导入库：

import 'package:simple_custom_calculator/simple_custom_calculator.dart';

使用方法

以下是一个简单的示例，展示如何在您的 Flutter 应用程序中使用 SimpleCustomCalculator。

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SimpleCustomCalculator(
          width: 500,
          height: 600,
          backgroundColor: Colors.black.withOpacity(0.8),
          buttonColor: Colors.blueGrey,
          buttonIsRectangle: true,
          buttonPadding: 3.0,
          numberSize: 39,
        ),
      ),
    );
  }
}

完整示例

以下是一些完整的示例代码，展示了如何创建不同样式的计算器。

主应用文件

import 'package:flutter/material.dart';
import 'package:simple_custom_calculator/simple_custom_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(
      title: 'Simple Custom Calculator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Simple Custom Calculator Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text('Simple Circle Button Calculator'),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const SimpleCircleButtonCalculator())
                );
              }
            ),
            ElevatedButton(
              child: const Text('Simple Rectangle Button Calculator'),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const SimpleRectangleButtonCalculator())
                );
              }
            ),
            ElevatedButton(
              child: const Text('Simple Color Button Calculator'),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const SimpleColorButtonCalculator())
                );
              }
            ),
            ElevatedButton(
              child: const Text('Simple Other Calculator'),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const SimpleOtherCalculator())
                );
              }
            ),
          ],
        ),
      ),
    );
  }
}

简单圆形按钮计算器

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

  [@override](/user/override)
  State<SimpleCircleButtonCalculator> createState() => _SimpleCircleButtonCalculatorState();
}

class _SimpleCircleButtonCalculatorState extends State<SimpleCircleButtonCalculator> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Circle Button Calculator'),
      ),
      body: Center(
        child: SimpleCustomCalculator(
          width: MediaQuery.of(context).size.width,
          height: 600,
          buttonIsRectangle: false,
        ),
      ),
    );
  }
}

简单矩形按钮计算器

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

  [@override](/user/override)
  State<SimpleRectangleButtonCalculator> createState() => _SimpleRectangleButtonCalculator();
}

class _SimpleRectangleButtonCalculator extends State<SimpleRectangleButtonCalculator> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Rectangle Button Calculator'),
      ),
      body: Center(
        child: SimpleCustomCalculator(
          width: MediaQuery.of(context).size.width,
          height: 600,
          buttonIsRectangle: true,
        ),
      ),
    );
  }
}

简单颜色按钮计算器

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

  [@override](/user/override)
  State<SimpleColorButtonCalculator> createState() => _SimpleColorButtonCalculator();
}

class _SimpleColorButtonCalculator extends State<SimpleColorButtonCalculator> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Color Button Calculator'),
      ),
      body: Center(
        child: SimpleCustomCalculator(
          width: MediaQuery.of(context).size.width,
          height: 600,
          backgroundColor: Colors.blueAccent,
          buttonColor: Colors.pinkAccent,
        ),
      ),
    );
  }
}

其他样式计算器

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

  [@override](/user/override)
  State<SimpleOtherCalculator> createState() => _SimpleOtherCalculator();
}

class _SimpleOtherCalculator extends State<SimpleOtherCalculator> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Other Calculator'),
      ),
      body: Center(
        child: SimpleCustomCalculator(
          width: MediaQuery.of(context).size.width,
          height: 600,
          buttonPadding: 10.0,
          numberSize: 75,
          buttonIsRectangle: true,
        ),
      ),
    );
  }
}