Анимируйте кнопку в индикаторе прогресса - PullRequest
Новая
       12

Анимируйте кнопку в индикаторе прогресса

0 голосов
/ 21 ноября 2019

У меня есть кнопка при нажатии на кнопку. Я показываю индикатор прогресса, мне нужно анимировать индикатор выполнения кнопки, что-то вроде перехода от кнопки к индикатору прогресса 

showProgressIndicator ? FloatingActionButton(
  elevation: 5.0,
  child: CircularProgressIndicator(),
  backgroundColor: Colors.white,
  onPressed: (){}
) : Padding(
  padding: const EdgeInsets.only(left: 20.0, right: 20.0),
  child: ButtonTheme(
    height: 40.0,
    child: RaisedButton(
      color: Color(0xFFFD6600),
      child: Text("Login", style: TextStyle(fontSize: 16.0),),
      textColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      onPressed: () {
        setState(() {
          showProgressIndicator = true;
        });
      },
    ),
  ),
),

Ответы [ 2 ]

1 голос
/ 21 ноября 2019

Возможно, используйте AnimatedContainer так: 

InkWell(
                borderRadius: BorderRadius.circular(20),
                onTap: isLoading ? null : () => buttonPressed(),
                child: AnimatedContainer(
                    curve: Curves.easeInOutCubic,
                    padding: (isLoading)
                        ? EdgeInsets.fromLTRB(10, 10, 10, 10)
                        : EdgeInsets.fromLTRB(40, 10, 40, 10),
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    duration: Duration(milliseconds: 400),
                    child: isLoading
                        ? CircularProgressIndicator(
                            valueColor: new AlwaysStoppedAnimation<Color>(
                                Colors.white),
                          )
                        : Text(
                            "LOGIN",
                            style: TextStyle(
                              fontSize: 18,
                              color: Colors.white,
                            ),
                          )),
              ),
0 голосов
/ 21 ноября 2019

Вы можете использовать что-то вроде этого, используйте переменную, чтобы сохранить статус кнопки. 

return _isLoading
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : RaisedButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30)),
                      color: .green,
                      child: Text(
                        'Continue',
                        style: TextStyle(
                            fontSize: 17.0,
                            fontFamily: 'SFUIDisplay-Bold',
                            color: .white),
                      ),
                      onPressed: () => _submitForm(),
                    );
...