flutter - 如何将 FloatingActionButton 定位在屏幕的右下角

Question

我试图将 FloatingActionButton 定位到屏幕的右下角，但我无法做到这一点，因为我正在为屏幕中的所有小部件使用一个列。我应该使用什么类型的布局？

这是我到目前为止所做的:

return Scaffold(
      body:Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/img/koralle.png'),
              fit: BoxFit.cover,
              //colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      'COMMUNITY WALL',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Icon(
                      Icons.search,
                      size: 30,
                      color: TheBaseColors.lightRed,
                    ),
                  ],
                ),
              ),
              Filters(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Latest',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  // I need to change this so its not a static value
                  height: 185,

                  child: ListView(
                    children: [
                      FeedWidget(
                        userName: 'User 1',
                        // I need to change this to networkimage
                        userImage: '',
                        imageFeed: '',
                        textFeed:
                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',                        timeFeed: '1 hr',
                      ),
                    ],
                  ),
                ),
              ),

              FloatingActionButton(


                onPressed: () {},

                child: const Icon(Icons.add),
                backgroundColor: TheBaseColors.lightRed,
              ),

            ],
          ),
        ),
      );
  }
}

我需要重新排列整个屏幕？如果是这样，哪种布局方法最好？

Answer 1

您可以使用 Scaffold 的 floatingActionButton 属性让它自动就位。

例子:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          centerTitle: true,
          title: Text(
            "Lessons of Flutter",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
        body: Center(
            child: const Text('Press the button below!')
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed code here!
          },
          child: Icon(Icons.mouse),
          backgroundColor: Colors.green,
        ),
      ),
    );
  }

另一种方法是使用 Stack 自己定位 FloatingActionButton(在某些情况下您想控制按钮的确切位置)