флаттер-веб: как лучше всего открыть детальную часть веб-сайта

Question

Я могу написать вещи как просто страницы виджетов. Но я бы ожидал лучшего пути, так как я думаю, что это нормальный случай в сети.

Шаги для воспроизведения

1. Включение списка содержимого с IconButton() в виджет.
2. После запуска с flutter run -d chrome он будет отображаться в chrome.
3. Я пытаюсь нажать на каждую кнопку в списке, чтобы открыть детали.

Ожидаемый 2 возможных результата:

1. Открыть деталь детали в область списка.
2. Или откройте деталь с новой вкладкой, но лучше поделиться меню и верхней частью. Я не думаю, что это тот же случай https://github.com/flutter/flutter/issues/33126.

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

Answer 1

Вы можете использовать виджет ExpansionTile в виджете ListView, чтобы получить ожидаемый Результат-1 следующим образом.

В этом дартпаде доступен живой пример .

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyExpansionTile(),
        ),
      ),
    );
  }
}

class MyExpansionTile extends StatelessWidget {

  // defining the title and descriptions.
  final List<String> titles = ['title-1', 'title-2', 'title-3'];
  final List<String> descriptions = [
    'Description for title-1',
    'Description for title-2',
    'Detailed Description for  title-3'
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {

        // handle index out of range.
        if(index >= titles.length)
          return null;

        // build and expansion tile for each title and description.
        return ExpansionTile(

          // comment following to show an arrow in the end of each expansion tile as per material design.
          trailing: Container(width: 0, height:0),          

          leading: Icon(Icons.open_in_browser),          
          title: Text(titles[index]),
          children: <Widget>[
            Text(descriptions[index]),
          ],
        );
      },
    );
  }
}

Это отобразит плитки расширения, как показано ниже. Плитка расширения является интерактивной, расширяется и сворачивается при нажатии.