How to show next page (Stateless widget) on click only in specific Container in SplitView, not all o-CodePudding

I have TestApp, where I have SplitView with 2 horizontal Containers. By clicking button in the first container on the left(blue) I want to show new page (DetailPage widget) but not all over the page, but only in the first Container. Now it shows on the whole screen. What is a best approach to do it?

import 'package:flutter/material.dart';
import 'package:split_view/split_view.dart';

void main() {
  runApp(MaterialApp(
    title: 'Test',
    home: TestApp(),
  ));
}

class TestApp extends StatelessWidget {
  const TestApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplitView(
        children: [
          Container(
            color: Colors.blue,
            child: ElevatedButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => DetailPage()));
                },
                child: const Text('CLICK')),
          ),
          Container(color: Colors.yellow),
        ],
        viewMode: SplitViewMode.Horizontal,
        indicator: SplitIndicator(viewMode: SplitViewMode.Horizontal),
        activeIndicator: SplitIndicator(
          viewMode: SplitViewMode.Horizontal,
          isActive: true,
        ),
        controller: SplitViewController(limits: [null, WeightLimit(max: 1)]),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('')), body: Container(color: Colors.red));
  }
}

CodePudding user response：

When you use Navigator.push your routing to a new page and creating a new state. I think you should use showGeneralDialog instead.

showGeneralDialog(
                  context: context,
                  pageBuilder: (BuildContext context,
                      Animation<double> animation, Animation<double> pagebuilder) {
                    return Align(
                      alignment: Alignment.centerLeft,
                      child: Card(
                          child: Container(
                              alignment: Alignment.topLeft,
                              color: Colors.amber,
 //show half the screen width
                              width: MediaQuery.of(context).size.width / 2,
                              child: IconButton(
                                  icon: const Icon(Icons.cancel),
                                  onPressed: () {
                                    Navigator.pop(context);
                                  }))),
                    );
                  });

CodePudding user response：

try to create new Navigator within Container:

  GlobalKey<NavigatorState> _navKey = GlobalKey();

      home: SplitView(
        children: [
          Container(
            child: Navigator(
        key: _navKey,
        onGenerateRoute: (_) => MaterialPageRoute<dynamic>(
          builder: (_) {
return Container(
            color: Colors.blue,
            child: ElevatedButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => DetailPage()));
                },
                child: const Text('CLICK')),
          );
},
        ),
      ),),