Flutter下拉选择插件ninja_dropdown的使用

Flutter下拉选择插件ninja_dropdown的使用

NinjaDropdown 🐱‍👤

NinjaDropdown是一款高度可定制化的下拉组件,旨在在实现下拉菜单时提供灵活性。它使你可以为各种下拉组件设置自定义形状和属性,从而增强整个应用的外观和感觉。

drawing

示例代码

默认用法

// 导入必要的包
import 'package:ninja_dropdown/ninja_dropdown.dart';

// 定义一个水果列表
final List<String> fruitList = ['Apple', 'Banana', 'Orange'];

// 在主应用中使用NinjaDropdown
NinjaDropdown(
  hintText: "请选择", // 提示文本
  itemList: fruitList, // 下拉选项列表
  onTap: (int val) { // 点击回调函数
    print("Selected item index: $val");
  },
)

自定义尾部图标

NinjaDropdown(
  hintText: "请选择", // 提示文本
  itemList: fruitList, // 下拉选项列表
  onTap: (int val) { // 点击回调函数
    print("Selected item index: $val");
  },
  onOpenTrailingIcon: Icons.grade, // 打开时的尾部图标
  onCloseTrailingIcon: Icons.cloud, // 关闭时的尾部图标
)

自定义样式

NinjaDropdown(
  hintText: "请选择", // 提示文本
  itemList: fruitList, // 下拉选项列表
  onTap: (int val) { // 点击回调函数
    print("Selected item index: $val");
  },
  onOpenTrailingIcon: Icons.grade, // 打开时的尾部图标
  onCloseTrailingIcon: Icons.cloud, // 关闭时的尾部图标
  menuBorderRadius: const BorderRadius.only(
    topLeft: Radius.circular(50),
    bottomRight: Radius.circular(50),
  ), // 菜单边框圆角
  textBoxDecoration: const BoxDecoration(
    color: Colors.amber,
    gradient: RadialGradient(
      colors: [Colors.white, Colors.blue],
      radius: 5,
    ),
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ), // 文本框装饰
  menuColor: Colors.blue[100]!, // 菜单背景颜色
  selectedItemColor: Colors.blue[300]!, // 选中项背景颜色
)

更多关于Flutter下拉选择插件ninja_dropdown的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter下拉选择插件ninja_dropdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用ninja_dropdown插件的示例代码。ninja_dropdown是一个用于创建下拉选择列表的Flutter插件,它提供了丰富的自定义选项,使得创建美观且功能丰富的下拉菜单变得简单。

首先,确保你已经在pubspec.yaml文件中添加了ninja_dropdown依赖:

dependencies:
  flutter:
    sdk: flutter
  ninja_dropdown: ^latest_version  # 请替换为实际的最新版本号

然后,运行flutter pub get来获取依赖。

接下来,你可以在你的Flutter项目中按照以下方式使用ninja_dropdown

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
  String? selectedItem;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ninja Dropdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NinjaDropdown(
              items: items,
              initialValue: items.first,
              hint: "Select an option",
              onChanged: (value) {
                setState(() {
                  selectedItem = value;
                });
              },
              search: true,
              searchHint: "Search...",
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3), // changes position of shadow
                ),
              ],
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.grey[300]!),
              ),
              dialogBoxDecoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              dialogBoxElevation: 8.0,
              dialogBoxShape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              searchTextStyle: TextStyle(color: Colors.grey),
              itemTextStyle: TextStyle(color: Colors.black),
            ),
            SizedBox(height: 20),
            Text(
              'Selected Item: $selectedItem',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们创建了一个包含几个选项的List<String>
  2. 使用NinjaDropdown小部件来显示下拉菜单。
  3. 设置了initialValue来指定初始选中的值。
  4. 使用hint属性来显示一个提示文本。
  5. 通过onChanged回调来处理用户选择的变化。
  6. 启用了搜索功能(search: true),并设置了搜索提示文本(searchHint)。
  7. 自定义了下拉菜单的边框半径、阴影、装饰等属性。

这个示例展示了如何使用ninja_dropdown插件来创建一个功能齐全且美观的下拉菜单。你可以根据需要进一步自定义和扩展这个示例。

回到顶部