Как фильтровать данные из сервера во Flutter приложении?

Question

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

Answer 1

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

Answer 2

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]),
];

БЛОГ НА HUSL

Как фильтровать данные из сервера во Flutter приложении?

Ответы (2 шт):