在 flutter 中实现浮动操作按钮等功能

Question

how can I achieve this functionality with fixed at the bottom, above the list and the list gets scroll in flutter? Thanks in advance!!!

Answer 1

you can use FloatingActionButton.extended() and create Row inside it then wrap your Row with GestureDetector to catch onTap .

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Floating Action Button Extended"),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        backgroundColor: Colors.white,
        label: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
              onTap: () {
                print('button 1');
              },
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 5.0),
                    child: Icon(
                      Icons.verified_user,
                      color: Colors.purple,
                    ),
                  ),
                  Text(
                    'Me',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.purple,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(width: 30),
            GestureDetector(
              onTap: () {
                print('button 2');
              },
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 5.0),
                    child: Icon(
                      Icons.qr_code,
                      color: Colors.purple,
                    ),
                  ),
                  Text(
                    'Scan',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.purple,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

result:

Answer 2

This will do the trick:

Scaffold(
      extendBody: true,
      bottomNavigationBar: Container(
        margin: EdgeInsets.only(left: MediaQuery.of(context).size.width/2 - 100, right: MediaQuery.of(context).size.width/2 - 100, bottom: 20),
        height: 60,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(10.0)),
          color: Color.fromRGBO(249, 125, 27, 1),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
              icon: Icon(
                Icons.home,
                color: Colors.white,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(
                Icons.people_alt,
                color: Colors.white,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),