Flutter插件sura_flutter的使用方法

sura_flutter 是一个用于自定义小部件和实用函数的Flutter包。以下是该插件的一些潜在用途及完整的示例代码。

Flutter插件sura_flutter的安装

首先，在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  sura_flutter: ^1.4.2

然后运行 flutter pub get 来安装依赖。

小部件

sura_flutter 提供了许多有用的自定义小部件。以下是一些示例。

ConditionalWidget

根据布尔条件构建不同的小部件。

import 'package:flutter/material.dart';
import 'package:sura_flutter/sura_flutter.dart';

class ConditionalWidgetExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Conditional Widget")),
      body: Center(
        child: ConditionalWidget(
          condition: true,
          trueChild: Text("Condition is true"),
          falseChild: Text("Condition is false"),
        ),
      ),
    );
  }
}

LoadingOverlay

创建覆盖整个屏幕的加载指示器，并禁用输入。

import 'package:flutter/material.dart';
import 'package:sura_flutter/sura_flutter.dart';

class LoadingOverlayExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Loading Overlay")),
      body: Center(
        child: SuraAsyncButton(
          child: Text("Show Loading Overlay"),
          onPressed: () async {
            LoadingOverlay.of(context).show();
            await Future.delayed(Duration(seconds: 2));
            LoadingOverlay.of(context).hide();
          },
        ),
      ),
    );
  }
}

SuraAccordion

自定义的展开/折叠小部件。

import 'package:flutter/material.dart';
import 'package:sura_flutter/sura_flutter.dart';

class SuraAccordionExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Sura Accordion")),
      body: SuraAccordion(
        header: Text("Header"),
        content: Text("Content"),
      ),
    );
  }
}

SuraFormMixin

为表单处理提供一些属性和方法。

import 'package:flutter/material.dart';
import 'package:sura_flutter/sura_flutter.dart';

class SuraFormMixinExample extends StatefulWidget {
  [@override](/user/override)
  _SuraFormMixinExampleState createState() => _SuraFormMixinExampleState();
}

class _SuraFormMixinExampleState extends State<SuraFormMixinExample> with SuraFormMixin {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Sura Form Mixin")),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(labelText: "Username"),
              validator: (value) => SuraFormValidator.validateField(value, field: "username"),
            ),
            TextFormField(
              decoration: InputDecoration(labelText: "Age"),
              validator: (value) => SuraFormValidator.isNumber(value, field: "age"),
            ),
            TextFormField(
              decoration: InputDecoration(labelText: "Email"),
              validator: (value) => SuraFormValidator.validateEmail(value, field: "email"),
            ),
            SuraAsyncButton(
              child: Text("Submit"),
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  toggleLoading();
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

混入（Mixins）

AfterBuildMixin

在构建方法之后调用的方法。

import 'package:flutter/material.dart';
import 'package:sura_flutter/sura_flutter.dart';

class AfterBuildMixinExample extends StatefulWidget {
  [@override](/user/override)
  _AfterBuildMixinExampleState createState() => _AfterBuildMixinExampleState();
}

class _AfterBuildMixinExampleState extends State<AfterBuildMixinExample> with AfterBuildMixin {
  [@override](/user/override)
  void afterBuild(BuildContext context) {
    print("Widget has been built");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("After Build Mixin")),
      body: Center(child: Text("Tap to build")),
    );
  }
}

SuraFormMixin

为表单处理提供一些属性和方法。

import 'package:flutter/material.dart';
import 'package:sura_flutter/sura_flutter.dart';

class SuraFormMixinExample extends StatefulWidget {
  [@override](/user/override)
  _SuraFormMixinExampleState createState() => _SuraFormMixinExampleState();
}

class _SuraFormMixinExampleState extends State<SuraFormMixinExample> with SuraFormMixin {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Sura Form Mixin")),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(labelText: "Username"),
              validator: (value) => SuraFormValidator.validateField(value, field: "username"),
            ),
            TextFormField(
              decoration: InputDecoration(labelText: "Age"),
              validator: (value) => SuraFormValidator.isNumber(value, field: "age"),
            ),
            TextFormField(
              decoration: InputDecoration(labelText: "Email"),
              validator: (value) => SuraFormValidator.validateEmail(value, field: "email"),
            ),
            SuraAsyncButton(
              child: Text("Submit"),
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  toggleLoading();
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

扩展（Extensions）

BuildContext 扩展

扩展了 BuildContext 的一些方法。

import 'package:flutter/material.dart';
import 'package:sura_flutter/sura_flutter.dart';

class BuildContextExtensionExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Build Context Extension")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Screen Size: ${context.screenSize.width}"),
            Text("Primary Color: ${context.primaryColor.value}"),
            Text("Accent Color: ${context.accentColor.value}"),
            ElevatedButton(
              onPressed: () {
                context.hideKeyboard();
              },
              child: Text("Hide Keyboard"),
            ),
          ],
        ),
      ),
    );
  }
}