Синхронизация представления списка и представления подробностей

У меня есть приложение с простым функционалом. После аутентификации пользователь видит страницу с виджетом ListView, который заполняется с помощью виджета StreamBuilder и BLoC. При нажатии на строку ListView открывается страница сведений с набором подробных виджетов (TextField. Теперь мне нужно изменить дизайн графического интерфейса для таблиц. Поскольку у нас больше места, я решил отображать подробности рядом с представлением списка, то есть когда пользователь нажимает на элемент ListView, новая страница не открывается, но подробности отображаются в правой части ListView. Мне нужна идея, как синхронизировать виджет подробного представления с выбранным элементом в виджете представления списка. Я понял, что могу каким-то образом использовать ValueNotifier/ValueListenableBuilder, но я не могу собраться с мыслями. Мне нужны идеи, пожалуйста.


flutter dart list details
person BambinoUA    schedule 14.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

пожалуйста, используйте этот пакет responseive_scaffold https://pub.dev/packages/responsive_scaffold
На мобильном устройстве это показывает список и нажимает на детали, а на планшете показывает список и выбранный элемент.

пример кода 

import 'package:flutter/material.dart';

import 'package:responsive_scaffold/responsive_scaffold.dart';

void main() => runApp(MyApp());

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

class _MyAppState extends State<MyApp> {
  var _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveListScaffold.builder(
        scaffoldKey: _scaffoldKey,
        detailBuilder: (BuildContext context, int index, bool tablet) {
          return DetailsScreen(
            // appBar: AppBar(
            //   elevation: 0.0,
            //   title: Text("Details"),
            //   actions: [
            //     IconButton(
            //       icon: Icon(Icons.share),
            //       onPressed: () {},
            //     ),
            //     IconButton(
            //       icon: Icon(Icons.delete),
            //       onPressed: () {
            //         if (!tablet) Navigator.of(context).pop();
            //       },
            //     ),
            //   ],
            // ),
            body: Scaffold(
              appBar: AppBar(
                elevation: 0.0,
                title: Text("Details"),
                automaticallyImplyLeading: !tablet,
                actions: [
                  IconButton(
                    icon: Icon(Icons.share),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () {
                      if (!tablet) Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
              bottomNavigationBar: BottomAppBar(
                elevation: 0.0,
                child: Container(
                  child: IconButton(
                    icon: Icon(Icons.share),
                    onPressed: () {},
                  ),
                ),
              ),
              body: Container(
                child: Center(
                  child: Text("Item: $index"),
                ),
              ),
            ),
          );
        },
        nullItems: Center(child: CircularProgressIndicator()),
        emptyItems: Center(child: Text("No Items Found")),
        slivers: <Widget>[
          SliverAppBar(
            title: Text("App Bar"),
          ),
        ],
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Text(index.toString()),
          );
        },
        bottomNavigationBar: BottomAppBar(
          elevation: 0.0,
          child: Container(
            child: IconButton(
              icon: Icon(Icons.share),
              onPressed: () {},
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            _scaffoldKey.currentState.showSnackBar(SnackBar(
              content: Text("Snackbar!"),
            ));
          },
        ),
      ),
    );
  }
}
person chunhunghan    schedule 14.08.2019