Блог

Я хотел бы знать, как добавить строку, которая при нажатии будет функционировать как нижний лист над нижней панелью навигации.

Нравится этот пример изображения

(Более темная строка).

Спасибо!

вы можете использовать свойство Scaffold, которое вызывается persistentFooterButtons , и вы можете добавить к нему виджет, это изображение приложения https://i.stack.imgur.com/Tb4iA.jpg , и это код для создания приложения.

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

class MyApp extends StatefulWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.white,
        ),
  

=================== это все, что вам нужно ==============================

         persistentFooterButtons: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              IconButton(
                iconSize: 35,
                icon: Icon(Icons.play_arrow),
                onPressed: null,
              ),
              Container(child: Text("Some data over hereSome data ")),
              IconButton(
                icon: Icon(Icons.favorite),
                onPressed: null,
              )
            ],
          )
        ],
  

=================================================

         bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('Business'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              title: Text('School'),
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}
  

Расширенный виджет должен решить вашу проблему. Видео и документация по ссылке. Это должно позволять размещать / перемещать строку в нижней части экрана, чтобы она была «выше» панели навигации. Просто оберните свой виджет расширенным виджетом.