DirectSelect Flutter 项目教程

最新推荐文章于 2024-08-26 09:34:43 发布

窦岑品

最新推荐文章于 2024-08-26 09:34:43 发布

阅读量276

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00665/article/details/141547674

版权

DirectSelect Flutter 项目教程

direct-select-flutterDirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux项目地址:https://gitcode.com/gh_mirrors/di/direct-select-flutter

1、项目介绍

DirectSelect Flutter 是一个开源的选择控件，它提供了一个全屏的模态弹出窗口，用于显示可选择的选项。这个控件的设计灵感来源于 Virgil Pana 的作品，旨在提供一个直观且高效的选择体验。项目托管在 GitHub 上，由 LanarsInc 维护。

2、项目快速启动

安装依赖

首先，确保你已经在你的 Flutter 项目中添加了 direct_select 依赖。你可以在 pubspec.yaml 文件中添加以下内容：

dependencies:
  direct_select: "^1.0.3"

然后运行以下命令来更新你的包：

flutter packages get

基本使用

以下是一个简单的示例，展示了如何在你的 Flutter 应用中使用 DirectSelect：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final elements1 = ["Option 1", "Option 2", "Option 3"];
  int selectedIndex1 = 0;

  List<Widget> _buildItems1() {
    return elements1
        .map((val) => MySelectionItem(
              title: val,
            ))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DirectSelect Example"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          children: <Widget>[
            DirectSelectList<String>(
              values: elements1,
              defaultItemIndex: selectedIndex1,
              itemBuilder: (String value) => _buildItems1()[elements1.indexOf(value)],
              focusedItemDecoration: _getDslDecoration(),
              onItemSelectedListener: (item, index, context) {
                setState(() {
                  selectedIndex1 = index;
                });
                Scaffold.of(context).showSnackBar(
                  SnackBar(content: Text(item)),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

  BoxDecoration _getDslDecoration() {
    return BoxDecoration(
      border: BorderDirectional(
        bottom: BorderSide(width: 1, color: Colors.black),
        top: BorderSide(width: 1, color: Colors.black),
      ),
    );
  }
}

class MySelectionItem extends StatelessWidget {
  final String title;
  const MySelectionItem({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: Text(title),
    );
  }
}