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();
      });
}
相关推荐
不羁的木木1 小时前
给鸿蒙 App 增加唤起系统邮件发送能力 —— flutter_email_sender 的鸿蒙使用指南
flutter·华为·harmonyos
●VON2 小时前
Flutter 鸿蒙插件适配实战:用 accurate_storage_info 0.1.1 查询总量、可用量与已用量
flutter·华为·harmonyos
●VON3 小时前
Flutter 鸿蒙插件适配实战:用 network_status_bridge 0.0.5 查询并监听默认网络
网络·flutter·华为·harmonyos·鸿蒙
安好说AI4 小时前
Flutter for OpenHarmony 实战:媒体选择库 adaptive_image_picker 的鸿蒙化适配全解读
flutter·harmonyos·媒体
恋猫de小郭4 小时前
ADB Wi-Fi 2.0 ,Android 17 把无线调试的连接链路重新做了一遍
android·前端·flutter
●VON4 小时前
Flutter 鸿蒙插件适配实战:用 app_version_details 1.0.3 读取版本号与包名
flutter·华为·harmonyos
●VON7 小时前
Flutter 鸿蒙插件适配实战:用 locale_plus 2.0.0 读取语言、地区与格式偏好
flutter·华为·harmonyos·鸿蒙
●VON17 小时前
Flutter 鸿蒙插件适配实战:用 clipboard_watcher 0.3.0 监听剪贴板变化
flutter·华为·harmonyos
天空之城--20 小时前
Flutter Drift 完全指南:从原理到实战
jvm·flutter·oracle