有用的组件

此包通过提供一系列简单有用的小部件，使构建应用变得容易。

import 'package:useful_widgets/useful_widgets.dart';

此包中可用组件的列表

  • FutureWidget
  • RefreshWidget
  • SearchWidget

下面我将解释每个组件的使用方法

FutureWidget

用于加载Future请求的简单组件，显示加载屏幕，如果发生错误，则显示错误屏幕。

FutureWidget<String>(
    future: (context) => myFutureRequest,
    retry: (context) => retryMyFutureRequest(),
    builder: (context, result) => Text(result),
);
成功 错误
future_widget_sucess future_widget_error

“重试”按钮仅在提供了retry参数时显示。

示例： 天气预报

RefreshWidget

用于在您的ListView中实现下拉刷新的简单组件。

RefreshWidget<List<String>>(
    future: (context) => myFutureItems,
    builder: (context, result) => ListView.separated(
      itemCount: result.length,
      itemBuilder: (context, index) => Text(result[index]),
      separatorBuilder: (context, index) => Divider(),
    ),
);
刷新
refresh_widget

示例： 天气预报

SearchWidget

此组件可帮助您创建一个简单的搜索页面，您需要创建一个类并继承SearchWidget。

class CitySearchWidget extends SearchWidget<List<CityModel>> {
    CitySearchWidget();

    @override
    Widget buildResult(BuildContext context, List<CityModel> result) {
        return ListView.separated(
            itemCount: result.length,
            itemBuilder: (context, index) => buildItemView(context, result[index]),
            separatorBuilder: (context, index) => Divider(),
        );
    }

    @override
    bool canSearch(BuildContext context, String query) {
        return query.length > 3;
    }

    @override
    Future<List<CityModel>> search(String query) {
        return Module.of<AppModule>().service<OpenWeatherApi>().searchCities(query);
    }

    buildItem(BuildContext context, CityModel city) {
        return ListTile(
            leading: Image.network('http://openweathermap.org/img/wn/${city.weather[0].icon}@2x.png'),
            title: buildItemTitle(city),
            onTap: () {
                Module.of<AppModule>().service<AppService>().updateCurrentCity(context, city.id);
                close(context);
            },
        );
    }

    buildItemTitle(CityModel city) {
        return Row(
            children: <Widget>[
            Image.network('http://openweathermap.org/images/flags/${city.sys.country.toLowerCase()}.png'),
            Padding(padding: EdgeInsets.all(2),),
            Text(city.name),
            Padding(padding: EdgeInsets.all(2),),
            ],
        );
    }
}
Search
search_widget

示例： 天气预报

自定义包位置

首先，我们将创建自定义国际化，它将扩展默认的包位置。您应该覆盖customValues并仅输入您要更改的消息。

import 'package:useful_widgets/useful_widgets.dart';

class CustomLocalization extends UsefulWidgetsLocalizations {
  CustomLocalization(Locale locale) : super(locale);
  
  @override
  Map<dynamic, Map<dynamic, String>> get customValues => {
    'en': {
      WidgetMessages.message1: 'Custom first message',
      WidgetMessages.message2: 'Custom second message',
    },
    'es': {
      WidgetMessages.message1: 'Primer mensaje personalizado',
      WidgetMessages.message2: 'Segundo mensaje personalizado',
    },
    'pt': {
      WidgetMessages.message1: 'Primeira mensagem personalizada',
      WidgetMessages.message2: 'Segunda mensagem personalizada',
    }
  };
}

最后，在您的应用的MaterialApp的localizationsDelegates中提供委托。

MaterialApp(
  localizationsDelegates: [
    UsefulWidgetsLocalizationsDelegate((locale) => CustomLocalization(locale)),
  ],
)

GitHub

https://github.com/ricardocrescenti/flutter-useful-widgets