Flutter自定义对话框插件ccp_dialog的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter自定义对话框插件ccp_dialog的使用

安装

1 添加最新版本的包到您的 pubspec.yaml 文件中（并运行 dart pub get）：

dependencies:
  flutter:
    sdk: flutter
  ccp_dialog: any

2 导入包并在在应用中使用它。

import 'package:ccp_dialog/country_picker/flutter_country_picker.dart';

使用示例

import 'package:ccp_dialog/country_picker/flutter_country_picker.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Country Piker Dialog'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String countryCode = "+91";
  Country selectedCountry = Country.IN;

  void _updateCountry(Country country) {
    selectedCountry = country;
    countryCode = "+${country.dialingCode}";
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Select Country'),
            Container(
              height: 45,
              width: MediaQuery.of(context).size.width / 2,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                color: Colors.white,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CountryPicker(
                    selectedCountry: selectedCountry,
                    dense: true,
                    showLine: true,
                    showFlag: false,
                    showFlagCircle: true,
                    dialingCodeTextStyle: const TextStyle(fontSize: 118),
                    showDialingCode: true,
                    showName: false,
                    withBottomSheet: true,
                    showCurrency: false,
                    showCurrencyISO: false,
                    onChanged: _updateCountry,
                  ),
                  const Text('9876541230', style: TextStyle(fontSize: 20)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

使用 Getx

Rx<Country> selectedCountry = Country.IN.obs;
var countryCode = "+91".obs;

void updateCountry(Country country) {
  selectedCountry.value = country;
  countryCode.value = "+" + country.dialingCode.toString();
}

Obx(
  () =&gt; CountryPicker(
    selectedCountry: _controller.selectedCountry.value,
    dense: false,
    showFlag: false,
    showFlagCircle: true,
    showDialingCode: true,                                      
    showName: false,
    showCurrency: false,                                         
    showCurrencyISO: false,
    onChanged: _controller.updateCountry
  ),
)

如何获取默认国家

Country? country = await getCountryByCountryCode(Get.context!, '+91');

Future&lt;Country?&gt; getCountryByCountryCode(BuildContext context, String countryCode) async {
  const list = Country.ALL;
  return list.firstWhere((element) =&gt; element.dialingCode == countryCode);
}

示例代码

import 'package:ccp_dialog/country_picker/flutter_country_picker.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Country Piker Dialog'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title});

  final String title;

  [@override](/user/override)
  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {
  String countryCode = "+247";
  Country selectedCountry = Country.AC;

  void _updateCountry(Country country) {
    selectedCountry = country;
    countryCode = country.dialingCode;
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Select Country'),
            Container(
              height: 50,
              width: MediaQuery.of(context).size.width / 1.5,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                color: Colors.white,
              ),
              child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                CountryPicker(
                  selectedCountry: selectedCountry,
                  dense: false,

                  //displays arrow, true by default
                  showLine: true,
                  //displays line, false by default If dense true Line not show
                  showFlag: true,
                  //displays flag, true by default
                  showFlagCircle: false,
                  //displays flagCircle, false by default
                  dialingCodeTextStyle: const TextStyle(fontSize: 18),
                  showDialingCode: true,
                  colorArrow: Colors.black,
                  //displays dialing code, false by default
                  showName: false,
                  //displays Name, true by default
                  withBottomSheet: false,
                  //displays country name, true by default
                  showCurrency: false,
                  //eg. 'British pound'
                  showCurrencyISO: false,
                  onChanged: _updateCountry),
                const Text('9876541230', style: TextStyle(fontSize: 20)),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用ccp_dialog插件来自定义对话框的一个示例。ccp_dialog是一个流行的Flutter插件，它允许开发者创建高度自定义的对话框。

首先，确保你已经在pubspec.yaml文件中添加了ccp_dialog依赖：

dependencies:
  flutter:
    sdk: flutter
  ccp_dialog: ^最新版本号  # 请替换为当前最新版本号

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

接下来，你可以在你的Flutter应用中导入并使用ccp_dialog。以下是一个完整的示例，展示如何创建一个简单的自定义对话框：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  void _showCustomDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return CCPDialog(
          // 自定义对话框的背景颜色
          backgroundColor: Colors.white,
          // 自定义对话框的圆角半径
          borderRadius: BorderRadius.circular(16),
          // 自定义对话框内容
          child: Container(
            padding: EdgeInsets.all(20),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  '这是一个自定义对话框',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 20),
                Text(
                  '这里可以添加更多的信息或控件。',
                  style: TextStyle(fontSize: 16),
                ),
                SizedBox(height: 20),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('取消'),
                      style: TextButton.styleFrom(
                        primary: Colors.grey,
                      ),
                    ),
                    SizedBox(width: 20),
                    ElevatedButton(
                      onPressed: () {
                        // 处理确认按钮的点击事件
                        Navigator.of(context).pop('确认');
                      },
                      child: Text('确认'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CCP Dialog 示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showCustomDialog,
          child: Text('显示对话框'),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 导入ccp_dialog包：在文件的顶部导入package:ccp_dialog/ccp_dialog.dart。
  2. 创建对话框：使用showDialog函数显示一个对话框，并通过builder参数构建对话框的内容。
  3. 使用CCPDialog：使用CCPDialog组件来自定义对话框的外观，包括背景颜色和圆角半径。
  4. 对话框内容：在CCPDialog的child属性中，我们创建了一个包含文本和按钮的容器。

这个示例展示了如何创建一个简单的自定义对话框，你可以根据需要进一步自定义对话框的内容和样式。

回到顶部