Нижний лист Flutter с наложением кнопки ввода: методы и примеры кода

Чтобы создать нижний лист Flutter с наложением кнопки ввода, вы можете использовать различные методы. Вот несколько примеров кода:

Метод 1: использование showModalBottomSheet и RaishedButton

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('Bottom Sheet Content'),
                SizedBox(height: 16.0),
                RaisedButton(
                  child: Text('Close'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet Example'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open Bottom Sheet'),
          onPressed: () {
            _showBottomSheet(context);
          },
        ),
      ),
    );
  }
}

Метод 2: использование DraggableScrollableSheet и RaishedButton

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: RaisedButton(
                child: Text('Open Bottom Sheet'),
                onPressed: () {
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return DraggableScrollableSheet(
                        expand: false,
                        builder: (BuildContext context, ScrollController scrollController) {
                          return Container(
                            color: Colors.white,
                            child: ListView(
                              controller: scrollController,
                              children: <Widget>[
                                ListTile(
                                  title: Text('Item 1'),
                                ),
                                ListTile(
                                  title: Text('Item 2'),
                                ),
                                ListTile(
                                  title: Text('Item 3'),
                                ),
                                RaisedButton(
                                  child: Text('Close'),
                                  onPressed: () {
                                    Navigator.of(context).pop();
                                  },
                                ),
                              ],
                            ),
                          );
                        },
                      );
                    },
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Метод 3: использование Persistent Bottom Sheet и RaishedButton

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  PersistentBottomSheetController _controller;
  void _showBottomSheet(BuildContext context) {
    _controller = Scaffold.of(context).showBottomSheet(
      (BuildContext context) {
        return Container(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('Bottom Sheet Content'),
                SizedBox(height: 16.0),
                RaisedButton(
                  child: Text('Close'),
                  onPressed: () {
                    _controller.close();
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet Example'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open Bottom Sheet'),
          onPressed: () {
            _showBottomSheet(context);
          },
        ),
      ),
    );
  }
}