Flutter 부유 단추 FloatingActionButton 사용 설명

1.일반 용법

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
      onPressed: (){
         print('   ~');
      },
 ),

2.부상 버튼 위치 수정
FloatingAction Button 위치 클래스 를 계승 하여 해당 방법 에 따라 위 치 를 다시 작성 합 니 다.

import 'package:flutter/material.dart';

class CustomFloatingActionButtonLocation extends FloatingActionButtonLocation {
  FloatingActionButtonLocation location;
  double offsetX;    // X      
  double offsetY;    // Y      
  CustomFloatingActionButtonLocation(this.location, this.offsetX, this.offsetY);

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    Offset offset = location.getOffset(scaffoldGeometry);
    return Offset(offset.dx + offsetX, offset.dy + offsetY);
  }
}

쓰다

floatingActionButtonLocation:CustomFloatingActionButtonLocation(
             FloatingActionButtonLocation.endFloat, 0, -DpUtils.setWidth(20)),

3.부상 버튼 크기 수정

floatingActionButton: SizedBox(
  height: 100.0,
  width: 100.0,
  child:FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
),

4.부상 제거 버튼 으로 애니메이션 전환
FloatingAction Button Animator 클래스 를 계승 하고 해당 하 는 방법 을 다시 씁 니 다.

import 'package:flutter/material.dart';

class NoScalingAnimation extends FloatingActionButtonAnimator{
  double _x;
  double _y;
  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
    _x = begin.dx +(end.dx - begin.dx)*progress ;
    _y = begin.dy +(end.dy - begin.dy)*progress;
    return Offset(_x,_y);
  }

  @override
  Animation<double> getRotationAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }

  @override
  Animation<double> getScaleAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }
}

쓰다

floatingActionButtonAnimator: NoScalingAnimation(),

5.일반적인 사용자 정의 부유 단추 스타일

@override
  Widget build(BuildContext context) {
    return Scaffold(
       floatingActionButton: FloatingActionButton(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  "images/float_button.png",
                  width: DpUtils.setWidth(32),
                  height: DpUtils.setWidth(32),
                ),
                Text(
                  "    ",
                  style: TextStyle(fontWeight: FontWeight.bold, 
                        fontSize: DpUtils.setSp(20), color: Colors.white),
                ),
              ],
            ),
          ),
          elevation: 0,
          onPressed: () {
            _doSome();
          },
          backgroundColor: Colors.black,
          heroTag: "floatHome",
        ),
    )
)}

6.철저한 사용자 정의 부유 단추 스타일
사실 플 로 팅 액 션 버튼 은 일반 widget 에 직접 들 어 갈 수 있 습 니 다.그 러 니까 뭐 해,뭐 해.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                "images/home_icon_publishing.png",
                width: DpUtils.setWidth(32),
                height: DpUtils.setWidth(32),
              ),
              Text(
                "   ",
                style: TextStyle(fontWeight: FontWeight.bold, 
                     fontSize: DpUtils.setSp(20), color: Colors.white),
              ),
            ],
          ),
        ),
    );
  }

Flutter 부유 버튼 FloatingAction Button 사용 에 대한 자세 한 설명 은 여기 서 소개 합 니 다.Flutter 부유 버튼 FloatingAction Button 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!