在颤动中使微调器背景透明

Posted 2023-05-07

【中文标题】在颤动中使微调器背景透明

【英文标题】：Making spinner background transparent in flutter

【发布时间】：2021-12-25 11:01:39

【问题描述】：

我是 Flutter 和制作我的第一个 webview 应用程序的新手。每次当用户尝试单击链接或页面加载时，我都会尝试添加一个微调器。我想像给定的示例一样使微调器背景不透明度有点低，但不透明度根本不起作用。

我的方法

   Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white.withOpacity(0.5),
            child: Center(
              child: SpinKitDualRing(
                color: Colors.pinkAccent,
                size: 45.0,
                controller: AnimationController(
                  vsync: this,
                  duration: const Duration(milliseconds: 1200),
                ),
              ),
            ),
          )

我在这里使用flutter_spinkit 包作为微调器。

完整代码

// ignore_for_file: prefer_const_constructors
// ignore: use_key_in_widget_constructors
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:splash_screen_view/SplashScreenView.dart';

void main()
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Color(0xff1e2229)
  ));
   runApp(MyApp());


 
class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
     
        Widget spalshfirst = SplashScreenView(
              navigateRoute: WebViewClass(),
              duration: 3000,
              imageSize: 80,
              imageSrc: 'assets/splash.png',
              text: "Food Delivery",
              textType: TextType.TyperAnimatedText,
              textStyle: TextStyle(
                fontSize: 25.0,
              ),
              colors: const [
                Colors.purple,
                Colors.blue,
                Colors.yellow,
                Colors.red,
              ],
              backgroundColor: Colors.white,
            );

    return  MaterialApp(
            debugShowCheckedModeBanner: false,
            home:  Scaffold(
                       body: spalshfirst
                      )
              );
  
  

 
class WebViewClass extends StatefulWidget 
  WebViewState createState() => WebViewState();


class WebViewState extends State<WebViewClass> with TickerProviderStateMixin

 late WebViewController _controller;

  final Completer<WebViewController> _controllerCompleter =
      Completer<WebViewController>();
  //Make sure this function return Future<bool> otherwise you will get an error
  Future<bool> _onWillPop(BuildContext context) async 
    if (await _controller.canGoBack()) 
      _controller.goBack();
      return Future.value(false);
     else 
      return Future.value(true);
    
  

  @override
   void initState() 
     super.initState();
         // Enable hybrid composition.
    if (Platform.isandroid) WebView.platform = SurfaceAndroidWebView();
   

  bool isLoading = false;
  final key = UniqueKey();
  
 int position = 0;
  @override
  Widget build(BuildContext context) 
    return WillPopScope(
      onWillPop: () => _goBack(context),
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: null,
        body: SafeArea(
          child: IndexedStack(
            index: position,
            children: [
              WebView(
                initialUrl: 'https://google.com',
                javascriptMode: JavascriptMode.unrestricted,
                key: key,
                onPageStarted: (value) 
                  setState(() 
                    position = 1;
                  );
                ,
                onPageFinished: (value) 
                  setState(() 
                    position = 0;
                  );
                ,
                onWebViewCreated: (WebViewController webViewController) 
                  _controllerCompleter.future
                      .then((value) => _controller = value);
                  _controllerCompleter.complete(webViewController);
                ,
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                color: Colors.white.withOpacity(0.5),
                child: Center(
                  child: SpinKitDualRing(
                    color: Colors.pinkAccent,
                    size: 45.0,
                    controller: AnimationController(
                      vsync: this,
                      duration: const Duration(milliseconds: 1200),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  

 Future<bool> _goBack(BuildContext context) async 
    if (await _controller.canGoBack()) 
      _controller.goBack();
      return Future.value(false);
     else 
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('Do you want to exit from Foodrive?'),
                actions: <Widget>[
                  TextButton(
                    onPressed: () 
                      Navigator.of(context).pop();
                    ,
                    child: Text('No'),
                  ),
                  TextButton(
                    onPressed: () 
                      SystemNavigator.pop();
                    ,
                    child: Text('Yes'),
                  ),
                ],
              ));
      return Future.value(true);
    
   

【参考方案1】：

由于容器仅包含微调器，而不包含背景小部件，因此设置其不透明度将不起作用，

我建议将Stack 小部件与Opacity 小部件一起使用

类似这样的东西（只是一个参考点）：

return Stack(children: [
      Opacity(opacity: 0.5, child: resetOfTheWidgetTree),
      Container(child: spinWidgetHere), 
    ]);

【讨论】：

你能举个例子吗？