Блог

Я пытаюсь «развернуть» карту во время навигации. Почти каждый компонент внутри этой карты представляет собой Hero . Я подошел к этой проблеме с Stack позицией a и, но таким образом, я должен позиционировать каждый элемент вручную.

Проблема в том, что Flutter это не позволяет иметь Hero внутри другого Hero . Кто-нибудь находит лучшую реализацию?

Первая страница:

     return Scaffold(
      body: GestureDetector(
                onTap: (details) {
                  print("navigate to second detail page");
                },
                child: Stack(
                      children: <Widget>[
                        Hero(
                          tag: "container${_task['name']}",
                          child: Container(
                            width: double.infinity,
                            margin: const EdgeInsets.only(right: 20),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(12),
                            ),
                          ),
                        ),
                        Positioned(
                          top: 20,
                          left: 15,
                          child: Hero(
                            tag: "icon${_task['name']}",
                            child: Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(100),
                                border: Border.all(
                                  width: 2,
                                  color: Colors.black12,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          right: 30,
                          top: 30,
                          child: Hero(
                            tag: "menu${_task['name']}",
                            child: Text("name")
                          ),
                        )
                      ],
                    ),
              ),
    );

 

Это расширенное:

 return Scaffold(
      backgroundColor: task.color,
      body: Stack(
        children: [
          Hero(
            tag: "container${task.name}",
            child: Material(
              child: Container(
                padding: const EdgeInsets.all(12),
                color: Colors.white,
                height: double.infinity,
                child: SafeArea(
                  top: true,
                  bottom: false,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      IconButton(
                        icon: Icon(Platform.isIOS == true
                            ? Icons.arrow_back_ios
                            : Icons.arrow_back),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          Positioned(
            child: Hero(
              tag: "icon${task.name}",
              child: Text(
                task.name,
                style: TextStyle(color: task.color),
              ),
            ),
          )
        ],
      ),
    );