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 天前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水1 天前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
周胡杰1 天前
组件导航 (Navigation)+flutter项目搭建-混合开发+分栏
数码相机·flutter·华为·电脑·harmonyos·鸿蒙
初遇你时动了情1 天前
flutter flutter run 运行项目卡在Running Gradle task ‘assembleDebug‘...
flutter
初遇你时动了情1 天前
flutter 配置 安卓、Ios启动图
android·flutter·ios
程序猿阿伟1 天前
《云端共生体:Flutter与AR Cloud如何改写社交交互规则》
flutter·ar·交互
lpfasd1231 天前
Flutter与Kotlin Multiplatform(KMP)深度对比及鸿蒙生态适配解析
flutter·kotlin·harmonyos
WDeLiang2 天前
Flutter - UIKit开发相关指南 - 线程和异步
flutter·ios·dart
TE-茶叶蛋2 天前
Uniapp、Flutter 和 React Native 全面对比
flutter·react native·uni-app
只可远观3 天前
Flutter目录结构介绍、入口、Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件
前端·flutter