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();
      });
}
相关推荐
2601_9499706912 小时前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
传奇开心果编程13 小时前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
flutter·移动开发·跨平台·dart·编程语言理论·编程框架·声明式ui
程序员老刘15 小时前
你的Flutter项目要不要紧急升级3.47.8?
flutter·客户端
Talyra4217 小时前
不想开会员,我写了一个记账 App
flutter
2601_949575861 天前
JSON5 跨端三方库仓颉适配全流程
前端·javascript·flutter
法的空间1 天前
AI 编程时代,为什么 Dart 分析会拖慢大型项目的开发
android·flutter·ios
恋猫de小郭1 天前
Flutter 紧急发布 3.47.8 安全升级版本,建议都升级
android·前端·flutter
好的佩奇2 天前
Dart 之模式
android·flutter·dart
淡淡的香烟2 天前
Flutter实现多语言切换
android·flutter·1024程序员节
事圆则缓2 天前
从零搭建一套 Flutter 架构:先跑通数据流
flutter