dart - 如何在 flutter 中调整 CircularProgressIndicator 的大小?

标签 dart flutter progress-bar

我看到了this questionthis issue ,但它不能解决我的问题。我尝试了 SizedBoxSizedBox.fromSize 以及 BoxConstraints,但它们都不起作用。

我该如何处理?

import 'package:flutter/material.dart';
import 'package:mymovie/bloc_helpers/bloc_event_state_builder.dart';
import 'package:mymovie/logics/intro/intro.dart';
import 'package:mymovie/resources/strings.dart';
import 'package:mymovie/utils/bloc_navigator.dart';
import 'package:mymovie/utils/bloc_snackbar.dart';
import 'package:mymovie/utils/service_locator.dart';

class IntroScreen extends StatefulWidget{

  @override
  _IntroScreenState createState() => _IntroScreenState();
}

class _IntroScreenState extends State<IntroScreen> with SingleTickerProviderStateMixin{

  final IntroBloc introBloc = sl.get<IntroBloc>();
  AnimationController animationController;
  Animation buttonSqueeze;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      duration: const Duration(milliseconds: 1500),
      vsync: this
    );
    buttonSqueeze = Tween(
      begin: 320.0,
      end: 70.0
    ).animate(CurvedAnimation(
      parent: animationController,
      curve: Interval(0.0,0.250)
    ));
    animationController.addListener(() {
      if(animationController.isCompleted) {
        introBloc.emitEvent(IntroEventKakaoLogin());
      }
    });
  }

  Future<void> _playAnimation() async{
    try {
      await animationController.forward();
    } on TickerCanceled {}
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/ironman.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken)
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.only(top: 180.0),
              child: Text(
                '영화일기',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 70.0
                ),
              ),
            ),
            SizedBox(height: 20.0),
            Container(
              color: Colors.white,
              width: 200.0,
              height: 4.0,
            ),
            SizedBox(height: 200.0),
            AnimatedBuilder(
              animation: buttonSqueeze,
              builder: (_,__){
                return BlocBuilder(
                  bloc: introBloc,
                  builder: (context, IntroState state){
                    if(state.isKakaoLoginSucceeded) {
                      BlocNavigator.pushReplacementNamed(context, routeHome);
                    }
                    if(state.isKakaoLoginFailed) {
                      BlocSnackbar.show(context, '로그인에 실패하였습니다.');
                      introBloc.emitEvent(IntroEventStateClear());
                    }
                    return GestureDetector(
                      child: Container(
                        width: buttonSqueeze.value,
                        height: 60.0,
                        decoration: BoxDecoration(
                          color: Colors.yellow,
                          borderRadius: BorderRadius.circular(15.0)
                        ),
                        child: buttonSqueeze.value>75.0 ? Row(
                          children: <Widget>[
                            SizedBox(width: 20.0),
                            buttonSqueeze.value<100.0 ? Container() :
                            Image.asset('assets/images/kakao.png'),
                            buttonSqueeze.value<300.0 ? Container() :
                            Container(
                              child: Text(
                                '카카오톡으로 로그인',
                                style: TextStyle(
                                  color: Colors.brown,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20.0
                                ),
                              ),
                            )
                          ],
                        ) : 
                        SizedBox(
                          child: CircularProgressIndicator(
                            valueColor: AlwaysStoppedAnimation<Color>(Colors.brown),
                            strokeWidth: 1.0,
                          ),
                          width: 30.0,
                          height: 30.0,
                        )
                      ),
                      onTap: () => _playAnimation()
                    );
                  }
                );
              }
            )
          ],
        )
      )
    );
  }
}

最佳答案

尝试这种方式,这解决了我的问题:

new Container(
              height: 60.0,
              child: new Center(child: new CircularProgressIndicator()),
            )

关于dart - 如何在 flutter 中调整 CircularProgressIndicator 的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55206949/

相关文章:

android - 如何将现有的sqlite数据库添加到Flutter并作为卡片列表打印?

flutter - 加载main()时如何设置检查连接的bool值,然后使用它显示哪个屏幕

routing - 如何在 Flutter 中获取当前路由路径?

flutter - 如何解决Flutter中的窗口小部件溢出问题?

jquery - jquery向进度条添加百分比标签

firebase - 在flutter类中定义的 'SignInWithTwitter isn'方法

flutter - 有没有办法在 flutter 中自动点击按钮?

ios - Flutter - Firebase 云消息传递,iOS 上未收到数据消息

r - Shiny:ProgressBar,用于将数据从数据库加载到数据表(DT)

javascript - 如何在 Bootstrap 4 中制作进度条动画?