Flutter股票或行情搜索插件ticker_search的使用

特性

• 易用的股票代码搜索小部件。
• 可自定义的股票代码建议，并带有图标。
• 支持浅色和深色主题。
• Material 3设计。
• 返回一个包含所选股票代码对象的StockTicker。

准备工作

在开始之前，请确保您的开发机器上已安装Flutter。如果还没有，请访问Flutter官方网站以获取安装指南。

安装

在您的pubspec.yaml文件中添加以下依赖项：

dependencies:
  ticker_search: ^0.0.1
  stock_market_data: ^0.0.9

运行flutter pub get以安装这些依赖项。

使用方法

首先，导入ticker_search包：

import 'package:ticker_search/ticker_search.dart';

接下来，使用TickerSearch小部件：

final List<StockTicker>? tickers = await showSearch(
  context: context,
  delegate: TickerSearch(
    searchFieldLabel: '添加',
    suggestions: [
      TickerSuggestion(const Icon(Icons.view_headline), '主要', TickersList.main),
      TickerSuggestion(const Icon(Icons.business_sharp), '公司', TickersList.companies),
      TickerSuggestion(const Icon(Icons.precision_manufacturing_outlined), '行业', TickersList.sectors),
      TickerSuggestion(const Icon(Icons.workspaces_outline), '期货', TickersList.futures),
      TickerSuggestion(const Icon(Icons.computer), '加密货币', TickersList.cryptoCurrencies),
      TickerSuggestion(const Icon(Icons.language), '国家', TickersList.countries),
      TickerSuggestion(const Icon(Icons.account_balance_outlined), '债券', TickersList.bonds),
      TickerSuggestion(const Icon(Icons.architecture_sharp), '规模', TickersList.sizes),
    ],
  ),
);

示例代码

以下是一个完整的示例代码，展示了如何使用ticker_search插件：

import 'package:flutter/material.dart';
import 'package:stock_market_data/stock_market_data.dart';
import 'package:ticker_search/ticker_search.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData.dark(),
        home: const MyHomePage(title: '股票代码搜索演示'),
      );
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: const Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: SearchWidget(),
            ),
          ],
        ),
      );
}

class SearchWidget extends StatefulWidget {
  const SearchWidget({
    super.key,
  });

  [@override](/user/override)
  State<SearchWidget> createState() => _SearchWidgetState();
}

class _SearchWidgetState extends State<SearchWidget> {
  StockTicker selected = const StockTicker(symbol: '');

  [@override](/user/override)
  Widget build(BuildContext context) {
    final String ticketDescription = TickerResolve.getTickerDescription(selected);

    return Column(
      children: [
        Text('选择: ${selected.symbol} > $ticketDescription'),
        InkWell(
          child: Container(
            color: Colors.lightBlue.withOpacity(0),
            padding: const EdgeInsets.only(
              left: 40,
              right: 40,
              bottom: 30,
            ),
            child: const Icon(
              Icons.add,
            ),
          ),
          onTap: () async {
            final List<StockTicker>? tickers = await showSearch(
              context: context,
              delegate: TickerSearch(
                searchFieldLabel: '搜索股票代码',
                suggestions: [
                  TickerSuggestion(
                    const Icon(Icons.view_headline),
                    '主要',
                    TickersList.main,
                  ),
                  TickerSuggestion(
                    const Icon(Icons.business_sharp),
                    '公司',
                    TickersList.companies,
                  ),
                  TickerSuggestion(
                    const Icon(Icons.precision_manufacturing_outlined),
                    '行业',
                    TickersList.sectors,
                  ),
                  TickerSuggestion(
                    const Icon(Icons.workspaces_outline),
                    '期货',
                    TickersList.futures,
                  ),
                  TickerSuggestion(
                    const Icon(Icons.computer),
                    '加密货币',
                    TickersList.cryptoCurrencies,
                  ),
                  TickerSuggestion(
                    const Icon(Icons.language),
                    '国家',
                    TickersList.countries,
                  ),
                  TickerSuggestion(
                    const Icon(Icons.account_balance_outlined),
                    '债券',
                    TickersList.bonds,
                  ),
                  TickerSuggestion(
                    const Icon(Icons.architecture_sharp),
                    '规模',
                    TickersList.sizes,
                  ),
                ],
              ),
            );

            if (tickers != null && tickers.isNotEmpty) {
              setState(() {
                // 将列表减少为一个文本，包含所有符号
                selected = tickers.reduce((value, element) => value.copyWith(
                      symbol: '${value.symbol}, ${element.symbol}',
                      description: '',
                    ));
              });
            }
          },
        ),
      ],
    );
  }
}