flutter - 如何在 flutter 中创建一个始终停留在页面底部的按钮？

Question

我想在 flutter 中实现以下 PhonePe UI。如何确保“继续”按钮始终保持在底部位置？

Image

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用 Scaffold

的 bottomSheet 属性

return Scaffold(
      ...
      bottomSheet: Container(
        width: MediaQuery.of(context).size.width,
        child: RaisedButton(
          child: Text('PROCEED'),
          onPressed: () {},
        ),
      ),
    );

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BottomSheetTestPage(),
    );
  }
}

class BottomSheetTestPage extends StatefulWidget {
  @override
  _BottomSheetPageState createState() => _BottomSheetPageState();
}

class _BottomSheetPageState extends State<BottomSheetTestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bottom sheet'),
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(index.toString()),
            subtitle: Text("${index}"),
          );
        },
        itemCount: 300,
      ),
      bottomSheet: Container(
        width: MediaQuery.of(context).size.width,
        child: RaisedButton(
          child: Text('PROCEED'),
          onPressed: () {},
        ),
      ),
    );
  }
}