flutterdart

How to show next page (Stateless widget) on click only in specific Container in SplitView, not all over the page


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));
  }
}

Solution

  • When pushing a new page you will be overriding the old one, meaning the new page will not have a spiltView, the best way to do this is by changing the widget displayed inside of the splitView like this :

    import 'package:flutter/material.dart';
    import 'package:split_view/split_view.dart';
    
    void main() {
      runApp(MaterialApp(
        title: 'Test',
        home: TestApp(),
      ));
    }
    
    class TestApp extends StatefulWidget { // I have already changed the widgte to stateful here
      const TestApp({Key? key}) : super(key: key);
    
      @override
      _TestAppState createState() => _TestAppState();
    }
    
    class _TestAppState extends State<TestApp> {
      @override
      Widget build(BuildContext context) {
        bool Bool;
        return MaterialApp(
          home: SplitView(
            children: [
              if (Bool == false){
                 Container(
                  color: Colors.blue,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          Bool = !Bool; // this the method for inverting the boolean, it just gives it the opposite value  
                        });
                      },
                      child: const Text('CLICK')),
                ),
              }
              else{
                DetailPage()
              },
    
              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));
      }
    }
    

    Above I defined a bool called Bool, when rendering the page it checks if Bool is false, in that case it returns the blue widget, if it is true then it returns the red one, and when you click on the button it inverts the bool and updates the page.

    Please note that for updating the page you have to use setState which rebuilds the widget, and to use it you have to use a stateful widget since stateless widget is static and cannot be changed.

    Also I haven't tested the code because I don't have split_view package, but you should be able to copy and paste it just fine, if you get any errors please let me know.