FloatingActionButton 위젯

예제

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

       

        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,           //

        floatingActionButton: FloatingActionButton.extended(  //extended 생성자를 사용하면 icon과 label이 들어가는 타원형 FloatingActionButton을 만들 수 있다.

          onPressed: () {},                                                //{} 중괄호안에는 버튼클릭시 실행할 코드

          backgroundColor: Colors.pink,

          label: Text('지금 예약하기'),                             //FloatingActionButton.extended 필수 속성 label

          ),

 

 

        bottomNavigationBar: BottomNavigationBar(              //하단 내비게이션바

          items: [ 

            BottomNavigationBarItem(icon: Icon(Icons.home,), label: '홈', ),

            BottomNavigationBarItem(icon: Icon(Icons.block), label: '차단'),

            BottomNavigationBarItem(icon: Icon(Icons.settings), label: '설정'),

          ],

          ),

      ),

    );

  }

}

 

 

alignment를 검색하려다 자동완성으로 floatingActionLocation을 발견해서 썼다.

floatingActionLocation은 여러가지 floatingAction의 위치타입이 있었다. 그중 예제는 floatingActionLocation.centerFloat이었다.

 

 floatingActionButton위치타입:  https://api.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html 

 

FloatingActionButton.~~~ 타입 샘플

샘플

 

실행결과

 

[참고]

https://terry1213.github.io/flutter/flutter-widget-of-the-week-floatingactionbutton/#properties

https://api.flutter.dev/flutter/material/FloatingActionButton-class.html