Flutter BottomAppBar插入FAB

3,888 阅读1分钟
import 'package:flutter/material.dart';

void main() => runApp(new BottomAppBarDemo());

class BottomAppBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("BottomAppBar"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: BottomAppBar(
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.add), title: Text("add")),
            BottomNavigationBarItem(
                icon: Icon(Icons.delete), title: Text("delete"))
          ],
        ),
      ),
    ));
  }
}

floatingActionButtonLocation 属性设置 FAB 位置

FloatingActionButtonLocation.endDocked
FloatingActionButtonLocation.centerDocked
FloatingActionButtonLocation.endFloat
FloatingActionButtonLocation.centerFloat
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked:


floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked:


floatingActionButtonLocation: FloatingActionButtonLocation.endFloat:


floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat: