Переход на новый экран, не покидая родительский экран

Я совершенно новичок во Flutter, и у меня есть этот экран, который использует bottomSheet, и я хочу перейти на новый экран, когда я нажимаю на проект, оставаясь внутри этого родительского экрана, на котором есть bottomSheet. Вот исходный код для родительского экрана и экрана Projects внутри него.

Экран главного меню родителей

import 'package:flutter/material.dart';
import 'projects.dart';
import 'app-bar.dart';

class MainMenu extends StatefulWidget {
  @override
  _MainMenuState createState() => _MainMenuState();
}

class _MainMenuState extends State<MainMenu> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _selectedIndex = 0;
  static List<TabItem> _widgetOptions = <TabItem>[
    TabItem(
      text: new Text('Projects'),
      className: Projects(),
    ),
    TabItem(
      text: new Text('Organization'),
      className: null,
    ),
    TabItem(
      text: new Text('Profile'),
      className: null,
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: SafeArea(
        child: new DefaultTabController(
          length: 3,
          child: new Scaffold(
            key: _scaffoldKey,
            appBar: appBar(_widgetOptions.elementAt(_selectedIndex).text),
            body: _widgetOptions.elementAt(_selectedIndex).className,
            bottomNavigationBar: BottomNavigationBar(
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.view_column),
                  label: 'Projects'
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.people),
                  label: 'Organization'
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: 'Profile'
                )
              ],
              currentIndex: _selectedIndex,
              onTap: _onItemTapped,
            ),
          ),
        )
      ),
    );
  }
}

class TabItem {
  Widget text;
  dynamic className;

  TabItem({ @required this.text, @required this.className });
}

Проекты

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pmtool/project-page.dart';
import './interfaces/iprojects.dart';
import './constants/route-names.dart';


class Projects extends StatefulWidget {
  @override
  _ProjectsState createState() => _ProjectsState();
}

class _ProjectsState extends State<Projects> {
  final GlobalKey<ScaffoldState> _scaffoldState = new GlobalKey<ScaffoldState>();
  static const List<Text> sortOptions = [
    Text('Project Name'),
    Text('Project Number'),
    Text('Client Name'),
    Text('Percent Completed'),
    Text('Date Added'),
    Text('Project Type'),
  ];
  static const List<String> sortOrder = [
    'Descending',
    'Ascending',
  ];
  static const List<String> filters = [
    'Ongoing',
    'All',
    'Completed',
  ];
  List<bool> isSelected = [
    true, false, false, false, false, false,
  ];
  String selectedSort = 'Descending';
  static List<ProjectsMock> projects = [
    ProjectsMock(projectId: '1', projectNumber: '1', projectName: 'Project 1', clientName: 'asd', projectStatus: 'Ongoing'),
    ProjectsMock(projectId: '2', projectNumber: '2', projectName: 'Project 2', clientName: 'qwe', projectStatus: 'Completed'),
  ];
  String selectedFilter = 'Ongoing';

  void selectItem(int index) {
    setState(() {
      for (int i = 0; i < isSelected.length; i++) {
        if (i != index) {
          isSelected[i] = false;
          return;
        }
        isSelected[i] = true;
      }
    });
  }

  void navigateToProject(BuildContext context, ProjectsMock project) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ProjectPage(),
        settings: RouteSettings(
          arguments: project,
        )
      )
    );
  }

  void setBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext buildContext) {
        return Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Text('Filters', style: TextStyle(fontWeight: FontWeight.bold),),
              new Wrap(
                spacing: 5.0,
                children: List.generate(filters.length, (index) {
                  if (selectedFilter == filters.elementAt(index)) {
                    return new ActionChip(
                      label: new Text(filters.elementAt(index)),
                      backgroundColor: Colors.blue,
                      labelStyle: TextStyle(color: Colors.white),
                      onPressed: () {
                        return;
                      },
                    );
                  }
                  return new ActionChip(
                    label: new Text(filters.elementAt(index)),
                    backgroundColor: Colors.white,
                    labelStyle: TextStyle(color: Colors.blue),
                    onPressed: () {
                      return;
                    },
                  );
                }),
              ),
              new Text('Sort by', style: TextStyle(fontWeight: FontWeight.bold),),
              new Wrap(
                spacing: 5.0,
                children: List.generate(sortOptions.length, (index) {
                  if (isSelected[index]) {
                    return new ActionChip(
                      label: sortOptions.elementAt(index),
                      backgroundColor: Colors.blue,
                      labelStyle: TextStyle(color: Colors.white),
                      onPressed: () {
                        return;
                      },
                    );
                  }
                  return new ActionChip(
                    label: sortOptions.elementAt(index),
                    backgroundColor: Colors.white,
                    labelStyle: TextStyle(color: Colors.blue),
                    onPressed: () {
                      return;
                    },
                  );
                }),
              ),
              new Container(
                margin: const EdgeInsets.only(top: 10.0),
                child: new Text('Sort Order', style: TextStyle(fontWeight: FontWeight.bold),),
              ),
              new Wrap(
                spacing: 5.0,
                children: List.generate(sortOrder.length, (index) {
                  if (selectedSort == sortOrder[index]) {
                    return new ActionChip(
                      label: Text(sortOrder.elementAt(index)),
                      backgroundColor: Colors.blue,
                      labelStyle: TextStyle(color: Colors.white),
                      onPressed: () {
                        return;
                      },
                    );
                  }
                  return new ActionChip(
                    label: Text(sortOrder.elementAt(index)),
                    backgroundColor: Colors.white,
                    labelStyle: TextStyle(color: Colors.blue),
                    onPressed: () {
                      return;
                    },
                  );
                }),
              ),
            ],
          ),
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new FloatingActionButton(child: new Icon(Icons.filter_alt), onPressed: () => setBottomSheet(context), mini: true),
      key: _scaffoldState,
      body: new Column(
        children: <Widget>[
          new Expanded(
            child: new Column(
              children: <Widget>[
                // Search header
                new Container(
                  padding: const EdgeInsets.all(10.0),
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Expanded(
                            child: new TextField(
                              decoration: new InputDecoration(
                                hintText: 'Search',
                                labelText: 'Search',
                                suffixIcon: new IconButton(icon: Icon(Icons.search), onPressed: () {
                                  return;
                                }),
                                contentPadding: const EdgeInsets.only(left: 5.0, right: 5.0)
                              ),
                            )
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                new Padding(
                  padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                  child: new Column(
                    children: List.generate(projects.length, (index) {
                      return new Container(
                        margin: const EdgeInsets.only(bottom: 10.0),
                        child: new RaisedButton(
                          onPressed: () => navigateToProject(context, projects.elementAt(index)),
                          color: Colors.white,
                          textColor: Colors.black,
                          child: new Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: new Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                new Expanded(
                                  child: new Column(
                                    children: <Widget>[
                                      new Text(projects.elementAt(index)?.projectName, style: TextStyle(fontWeight: FontWeight.bold)),
                                      new Text(projects.elementAt(index)?.projectNumber),
                                    ]
                                  ),
                                ),
                                new Expanded(
                                  child: new Column(
                                    children: <Widget>[
                                      new Text(projects.elementAt(index)?.clientName, style: TextStyle(fontWeight: FontWeight.bold)),
                                      new Text(projects.elementAt(index)?.projectStatus),
                                    ]
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                      );
                    }),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Вот снимок страницы.

Как мне это сделать? Я пытался использовать Navigator, но он переходит на совершенно новый экран. Дайте мне знать, если вам нужна дополнительная информация.

Пожалуйста, сделайте ваш вопрос как можно короче. Очень сложно отлаживать то, что происходит, когда вы выгружаете весь свой код. Ответ ниже решит вашу проблему. Я предлагаю изучать флаттер из учебных пособий по флаттеру и списков воспроизведения в Интернете. Они определенно очень помогают. Основы лучше не пропускать. Удачи.

CoderUni 18.12.2020 07:59
0
1
203
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы создаете другой внутри своего файла main.dart и используете Navigator для перехода к этому экрану, фактически не переходя на другой экран, вместо того, чтобы заменить текущий.

вот как идет код

Navigator.push(

              context,
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(string1: string),//passing a parameter
              ),

            );

и так проходит урок

class DisplayPictureScreen extends StatelessWidget {
  final String string1;
  
  const DisplayPictureScreen({Key key, this.string1}) : super(key: key);


  @override

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(value[0]["label"],style: TextStyle(color: Colors.black,fontSize: 20),
      )),
      
    
      body: Column(
        children: [
          Text("lsfnklsnlvfdngvlirs")

        ],
      ),

    );
  }
}

Другие вопросы по теме