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();
      });
}
相关推荐
君蓦3 小时前
Flutter 本地存储与数据库的使用和优化
flutter
problc13 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人21 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos