flutter 底部弹窗和中间弹窗

底部弹窗

c 复制代码
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class GameHub extends StatefulWidget {
  GameHub({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => GameHubState();
}

class GameHubState extends State<GameHub> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  mySetState(callBack) {
    if (mounted) {
      setState(() {
        callBack();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

//显示游戏中心弹窗
showGameHubDialog(BuildContext context) {
  showModalBottomSheet(
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16), topRight: Radius.circular(16))),
      isScrollControlled: true,
      enableDrag: false,
      context: context,
      builder: (context) => GameHub());
}

中间弹窗

c 复制代码
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:base_utils/base_utils.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import '../../../router.dart';
import '../../common/Global.dart';
import '../../common/backgroundWall.dart';
import '../../http/api.dart';
import '../../http/net_callback.dart';
import '../../http/rxhttp.dart';
import '../../http/utils/NetUtils.dart';
import '../../http/utils/response.dart';
import '../../models/country_list_model.dart';

///首页列表筛选地区弹窗
class FirstSelectCountry extends StatefulWidget {
  FirstSelectCountry({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => FirstSelectCountryState();
}

class FirstSelectCountryState extends State<FirstSelectCountry> {
  List<CountryItem> countryListData = [];
  String selectCountryShortCode = '';

  @override
  void initState() {
    getCountryList();
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  //国家地区列表
  getCountryList() {
    RxHttp<Response>()
      ..init()
      ..setBaseUrl(Api.BUSINESS_BASE_API)
      ..setPath(Api.COUNTRY_INFO_LIST)
      ..setCacheMode(CacheMode.FIRST_CACHE_THEN_REQUEST)
      ..setJsonTransFrom((p0) => Response.fromJson(json.decoder.convert(p0)))
      ..setParams({})
      ..call(
          NetCallback(
              onNetFinish: (response) {
                if (response.code == 200) {
                  CountryListModel countryListModel =
                      CountryListModel.fromJson(response.data);
                  handleCountryList(countryListModel);
                }
              },
              onCacheFinish: (response) {
                if (response.code == 200) {
                  CountryListModel countryListModel =
                      CountryListModel.fromJson(response.data);
                  handleCountryList(countryListModel);
                }
              },
              onNetError: (errorCode, error) {}),
          server: Servers.businessServer);
  }

  handleCountryList(CountryListModel countryListModel) {
    if (countryListModel.countryList != null) {
      if (countryListModel.countryList!.isNotEmpty) {
        countryListData = countryListModel.countryList ?? [];
        mySetState(() {});
      }
    }
  }

  mySetState(callBack) {
    if (mounted) {
      setState(() {
        callBack();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(8)),
          width: WidgetAdaptation.getWidth(305),
          height: WidgetAdaptation.getWidth(305),
          child: Wrap(
              spacing: 8,
              alignment: WrapAlignment.start,
              children: List.generate(countryListData.length, (index) {
                return RawChip(
                    showCheckmark: false,
                    label: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        BackgroundWall(
                          avatarUrl: countryListData[index].country_icon ?? '',
                          width: WidgetAdaptation.getWidth(17),
                          height: WidgetAdaptation.getWidth(12),
                          radius: 15,
                        ),
                        Text(countryListData[index].country_name ?? ''),
                      ],
                    ),
                    labelStyle: TextStyle(color: Color(selectCountryShortCode ==
                        countryListData[index].country_short_code!?0xFF666666:0xFF0CE6E2), fontSize: 12),
                    selected: countryListData[index].country_short_code ==
                        selectCountryShortCode,
                    selectedColor: Color(0xFF0CE6E2),
                    onSelected: (v) {
                      if (countryListData[index].country_short_code != null) {
                        selectCountryShortCode =
                            countryListData[index].country_short_code ?? '';
                        mySetState(() {});
                      }
                    },side:BorderSide(width: 1,color: selectCountryShortCode ==
                    countryListData[index].country_short_code!?Colors.blue:Colors.yellow),
                    backgroundColor: Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16.0)),
                    padding: const EdgeInsets.only(
                        left: 3, right: 3, top: 5, bottom: 5));
              }).toList())),
    );
  }
}

//首页地区筛选弹窗
showFirstSelectCountryDialog(context) {
  showDialog(
      context: context,
      builder: (context) {
        return FirstSelectCountry();
      });
}
相关推荐
kirk_wang6 小时前
Flutter艺术探索-Flutter状态管理方案对比:Provider vs Riverpod vs BLoC vs GetX
flutter·移动开发·flutter教程·移动开发教程
wqwqweee6 小时前
Flutter for OpenHarmony 看书管理记录App实战:搜索功能实现
开发语言·javascript·python·flutter·harmonyos
zilikew6 小时前
Flutter框架跨平台鸿蒙开发——书籍推荐APP的开发流程
flutter·华为·harmonyos·鸿蒙
zilikew6 小时前
Flutter框架跨平台鸿蒙开发——桌面宠物APP的开发流程
学习·flutter·harmonyos·鸿蒙·宠物
ITUnicorn7 小时前
Flutter调用HarmonyOS6原生功能:实现智感握持
flutter·华为·harmonyos·harmonyos6·智感握持
2601_949575868 小时前
Flutter for OpenHarmony二手物品置换App实战 - 商品卡片实现
android·flutter
时光慢煮9 小时前
基于 Flutter × OpenHarmony 的文件管家 - 构建常用文件夹区域
flutter·华为·开源·openharmony
2601_949575869 小时前
Flutter for OpenHarmony二手物品置换App实战 - 表单验证实现
android·java·flutter
b20772110 小时前
Flutter for OpenHarmony 身体健康状况记录App实战 - 健康目标实现
python·flutter·harmonyos
血色橄榄枝12 小时前
04-06 Flutter列表清单实现上拉加载 + 下拉刷新 + 数据加载提示 On OpenHarmony
flutter