0

Такой вопрос: - Приходят данные из сервера, картинки кошек и собак, всё вываливается на главный экран списком, хотел внизу экрана с помощью BottomNavigationBarсделать три кнопки (три фильтра) 'Все', 'только кошки','только собаки' я на правильном пути или всё это делается не так как мне думается ?
Большое Спасибо !

2 ответа 2

1

BottomNavigationBar больше подходит для навигации между страницами/экранами, нежели для фильтрации данных. Для вашей задачи я бы использовал AppBar с PopupMenuButton, для сортировки.

Вот простой пример как можно сделать (Попробовать можно тут):

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Choice _selectedChoice = choices[0];

  void _select(Choice choice) {
    setState(() {
      _selectedChoice = choice;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Basic AppBar'),
          actions: <Widget>[
            PopupMenuButton<Choice>(
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices.map((Choice choice) {
                  return PopupMenuItem<Choice>(
                    value: choice,
                    child: Text(choice.title),
                  );
                }).toList();
              },
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ChoiceCard(choice: _selectedChoice),
        ),
      ),
    );
  }
}

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: choice.list.length,
      itemBuilder: (c, i) => Card(
        color: Colors.white,
        child: Center(
          child: Text(choice.list[i].toString()),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.title, this.list});

  final String title;
  final List<int> list;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'All', list: [1, 2, 3, 4, 5, 6]),
  const Choice(title: 'Dogs', list: [1, 2, 3]),
  const Choice(title: 'Cats', list: [4, 5, 6]),
];
2
  • Спасибо большое ! Я ждал именно вашего ответа, очень благодарен вам, уже сижу пару суток голову ломаю как это сделать, дай вам Бог здоровья ... 6 фев 2020 в 9:46
  • @Northwood_FX пожалуйста, если будут вопросы спрашивайте!)
    – MiT
    6 фев 2020 в 10:04
0

Всё делается так как вам хочется. Нет неправильного пути. Хотите сделать 3 кнопки в BottomNavigationBar - делайте. Не понравится результат - придумайте что-то другое и переделайте.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.