Flutter loading实现案例参考

60 阅读1分钟

适配ios,android。加载loading案例,

ios:CupertinoActivityIndicator

android:CircularProgressIndicator

经典加载loading

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sxzd_flutter/common/widget/widgets.dart';

class CircularLoading extends StatelessWidget {
  const CircularLoading({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: commonTitleText("loading"),
        centerTitle: true,
      ),
      /*body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const Text(
              "ios",
            ),
            const SizedBox(
              height: 10,
            ),
            const CupertinoActivityIndicator(
              radius: 20,
            ),
            const Text(
              "android",
            ),
            const SizedBox(
              height: 10,
            ),
            const CircularProgressIndicator(
              color: Colors.red,
            ),
            const Text(
              "ios_loading",
            ),
            const SizedBox(
              height: 10,
            ),
            _body("ios"),
            const Text(
              "android_loading",
            ),
            const SizedBox(
              height: 10,
            ),
            _body("android"),
          ],
        ),
      ),*/
      body: _bodyStyle1(context),
    );
  }

  Widget _body(String platform) {
    var height = 150.0;
    return Container(
      height: height,
      width: height,
      alignment: Alignment.center,
      child: Container(
        padding: const EdgeInsets.all(20),
        decoration: const BoxDecoration(
          color: Colors.black12,
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            ///Platform.isIOS
            platform == "ios"
                ? const CupertinoActivityIndicator(
                    color: Colors.red,
                    radius: 20,
                  )
                : const CircularProgressIndicator(
                    color: Colors.red,
                  ),
            const SizedBox(
              width: 10,
              height: 10,
              child: FlutterLogo(),
            )
          ],
        ),
      ),
    );
  }

  Widget _bodyStyle1(BuildContext context) {
    var height = 150.0;
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: Container(
        height: height,
        width: height,
        alignment: Alignment.center,
        child: Container(
          padding: const EdgeInsets.all(20),
          decoration: const BoxDecoration(
            color: Colors.black12,
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Platform.isIOS
                  ? const CupertinoActivityIndicator(
                color: Colors.red,
                radius: 20,
              )
                  : const CircularProgressIndicator(
                color: Colors.red,
              ),
              const SizedBox(
                width: 10,
                height: 10,
                child: FlutterLogo(),
              )
            ],
          ),
        ),
      ),
    );
  }
}