Flutter对话框插件fialogs的使用

Flutter对话框插件fialogs的使用

简介

fialogs 是一个用于Flutter应用中的对话框插件，提供了多种类型的对话框，包括提示、确认、输入、进度和自定义对话框。以下是一个完整的示例demo，展示如何在Flutter中使用这个插件。

示例Demo

1. 安装依赖

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

dependencies:
  flutter:
    sdk: flutter
  fialogs: ^x.x.x # 替换为最新版本号
  provider: ^x.x.x # 替换为最新版本号
2. 创建主应用程序

在main.dart文件中创建主应用程序，并设置主题和多提供者（MultiProvider）：

import 'package:fialogs/fialogs.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => ProgressModel()),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Fialogs Demo',
        theme: lightTheme(),
        home: MyHomePage(title: 'Fialogs Demo Home Page'),
      ),
    );
  }

  // 主题设置函数
  lightTheme() => ThemeData.light().copyWith(
        primaryColor: Colors.teal,
        primaryColorDark: Colors.teal[700],
        accentColor: customColor,
        toggleableActiveColor: customColor,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      );

  // 自定义颜色设置
  final Map<int, Color> primaryColorCode = {
    50: Color.fromRGBO(98, 0, 238, .1),
    100: Color.fromRGBO(98, 0, 238, .2),
    200: Color.fromRGBO(98, 0, 238, .3),
    300: Color.fromRGBO(98, 0, 238, .4),
    400: Color.fromRGBO(98, 0, 238, .5),
    500: Color.fromRGBO(98, 0, 238, .6),
    600: Color.fromRGBO(98, 0, 238, .7),
    700: Color.fromRGBO(98, 0, 238, .8),
    800: Color.fromRGBO(98, 0, 238, .9),
    900: Color.fromRGBO(98, 0, 238, 1),
  };

  static final MaterialColor customColor = MaterialColor(0xFFF9AA33, primaryColorCode);
}
3. 创建主页面

在MyHomePage类中实现各种对话框的显示逻辑：

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  // 对话框类型列表
  List<String> _dialogList = [
    "Alert Dialog",
    "Success Dialog",
    "Error Dialog",
    "Warning Dialog",
    "Info Dialog",
    "Confirmation Dialog",
    "Single Input Dialog",
    "Progress Dialog",
    "Custom Dialog"
  ];

  var _dialogType = "Alert Dialog";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ChangeNotifierProvider(
        create: (context) => ProgressModel(),
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    DropdownButton<String>(
                      hint: Text("Dialog Type"),
                      value: _dialogType,
                      onChanged: (item) {
                        setState(() {
                          _dialogType = item!;
                        });
                      },
                      items: _dialogList.map((String item) {
                        return DropdownMenuItem<String>(
                          value: item,
                          child: Text("$item"),
                        );
                      }).toList(),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: ElevatedButton(
                  onPressed: () {
                    _showDialog();
                  },
                  child: Text("Show Dialog"),
                ),
              ),
              SizedBox(
                width: 16.0,
              ),
            ],
          ),
        ),
      ),
    );
  }

  _showDialog() {
    if (_dialogType == "Alert Dialog") {
      alertDialog(
        context,
        "Alert Dialog",
        "This is an alert dialog.",
        positiveButtonText: "OK",
        positiveButtonAction: () {},
        negativeButtonText: "Cancel",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    } else if (_dialogType == "Success Dialog") {
      successDialog(
        context,
        "Success Dialog",
        "Operation completed successfully.",
        positiveButtonText: "OK",
        positiveButtonAction: () {},
        negativeButtonText: "Cancel",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    } else if (_dialogType == "Error Dialog") {
      errorDialog(
        context,
        "Error Dialog",
        "An error occurred.",
        positiveButtonText: "OK",
        positiveButtonAction: () {},
        negativeButtonText: "Cancel",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    } else if (_dialogType == "Warning Dialog") {
      warningDialog(
        context,
        "Warning Dialog",
        "Please be cautious.",
        positiveButtonText: "OK",
        positiveButtonAction: () {},
        negativeButtonText: "Cancel",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    } else if (_dialogType == "Info Dialog") {
      infoDialog(
        context,
        "Info Dialog",
        "Here is some information.",
        positiveButtonText: "OK",
        positiveButtonAction: () {},
        negativeButtonText: "Cancel",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    } else if (_dialogType == "Confirmation Dialog") {
      confirmationDialog(
        context,
        "Confirmation Dialog",
        "Are you sure?",
        positiveButtonText: "Yes",
        positiveButtonAction: () {},
        negativeButtonText: "No",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    } else if (_dialogType == "Single Input Dialog") {
      singleInputDialog(
        context,
        "Single Input Dialog",
        DialogTextField(
          fieldLabel: "Input Field",
          obscureText: false,
          textInputType: TextInputType.text,
          validator: (value) {
            if (value.isEmpty) return "Required!";
            return null;
          },
          onEditingComplete: (value) {
            print(value);
          },
        ),
        positiveButtonText: "Yes",
        positiveButtonAction: (value) {
          print(value);
        },
        negativeButtonText: "No",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    } else if (_dialogType == "Progress Dialog") {
      progressDialog(
        context,
        displayValue: true,
        autoCloseOnCompletion: true,
        titleWidget: Text("Connecting", style: TextStyle(fontSize: 18)),
        progressDialogType: ProgressDialogType.CIRCULAR,
        contentWidget: Text(
          "Connecting to Server, Please wait, this will take some time...",
          textAlign: TextAlign.justify,
        ),
        positiveButtonText: "Yes",
        positiveButtonAction: () {},
        negativeButtonText: "No",
        negativeButtonAction: () {},
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
      updateProgress();
    } else if (_dialogType == "Custom Dialog") {
      customDialog(
        context,
        title: Text(
          "Custom Dialog",
          style: TextStyle(color: Colors.orange, fontSize: 32),
        ),
        content: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: "Input Field"),
            ),
            Divider(),
            Icon(
              Icons.person,
              size: 64,
              color: Colors.deepOrange,
            ),
            Divider(),
            Text(
              "Custom text description for custom dialog",
              style: TextStyle(color: Colors.pinkAccent, fontSize: 16),
            ),
          ],
        ),
        positiveButtonText: "Okay",
        positiveButtonAction: () {},
        negativeButtonText: "Not Okay",
        negativeButtonAction: () {},
        neutralButtonAction: () {
          Navigator.pop(context);
        },
        hideNeutralButton: true,
        closeOnBackPress: true,
      );
    }
  }

  updateProgress() async {
    var model = context.read<ProgressModel>();
    model.setValue(0.0);
    for (var i = 0.00; i <= 1.00; i = i + 0.01) {
      await Future.delayed(Duration(milliseconds: 100), () {
        var model = context.read<ProgressModel>();
        if (i > 0.99) {
          model.setValue(1.0);
        } else {
          model.setValue(i);
        }
      });
    }
  }
}

更多关于Flutter对话框插件fialogs的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter对话框插件fialogs的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用fialogs插件来创建对话框的示例代码。fialogs是一个提供多种样式对话框的Flutter插件。请确保你已经在pubspec.yaml文件中添加了fialogs依赖，并运行了flutter pub get。

首先，在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  fialogs: ^x.y.z  # 请替换为最新版本号

然后，你可以在你的Flutter项目中按照以下方式使用fialogs插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dialog Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void showAlertDialog() async {
    // 显示一个简单的Alert对话框
    bool result = await Fialogs.alert(
      context: context,
      title: 'Alert Dialog',
      message: 'This is an alert dialog.',
      confirmText: 'OK',
    );
    
    // 打印用户是否点击了确认按钮
    print('User clicked OK: $result');
  }

  void showConfirmDialog() async {
    // 显示一个确认对话框
    bool result = await Fialogs.confirm(
      context: context,
      title: 'Confirm Dialog',
      message: 'Are you sure you want to proceed?',
      confirmText: 'Yes',
      cancelText: 'No',
    );
    
    // 打印用户是否点击了确认按钮
    print('User confirmed: $result');
  }

  void showPromptDialog() async {
    // 显示一个提示输入对话框
    String? result = await Fialogs.prompt(
      context: context,
      title: 'Prompt Dialog',
      message: 'Enter your name:',
      confirmText: 'Submit',
      cancelText: 'Cancel',
      initialValue: '',
      inputValidator: (value) {
        if (value == null || value.isEmpty) {
          return 'Name cannot be empty';
        }
        return null;
      },
    );
    
    // 打印用户输入的值
    print('User input: $result');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dialog Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: showAlertDialog,
              child: Text('Show Alert Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showConfirmDialog,
              child: Text('Show Confirm Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showPromptDialog,
              child: Text('Show Prompt Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}.

在上面的代码中：

  1. showAlertDialog 方法使用 Fialogs.alert 显示一个简单的Alert对话框。 2 showConfirmDialog 方法使用 Fialogs.confirm 显示一个确认对话框。
  2. showPromptDialog 方法使用 Fialogs.prompt 显示一个提示输入对话框，并包含一个输入验证器。

这些示例展示了如何使用fialogs插件来创建不同类型的对话框，并处理用户的输入和选择。你可以根据实际需求进一步自定义这些对话框的样式和行为。

回到顶部