caduandrade / multi_split_view

Provides horizontal or vertical multiple split view for Flutter.
MIT License
152 stars 29 forks source link

Question/Feature: Set/Get position from devider / sizes of children manually / programatically #15

Closed j0chn1 closed 2 years ago

j0chn1 commented 2 years ago

Hey there, I'd like to get the current postion of the devider or the sizes of the children and save them to the hard drive. When restarting the app I want to use that saved values to set the position so the old state is restored. Maybe I just did not get how to do so, than I would be glad if you helped me. Else I'd appreciate that feature in a future release. Thank you and kind regards.

caduandrade commented 2 years ago

Hi @j0chn1 !

You just need to keep the controller in the State and get the weights. To restore, just rebuild the controller using the last weights in the initialWeights parameter.

Example:

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

void main() => runApp(MultiSplitViewExampleApp());

class MultiSplitViewExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiSplitViewExample(),
    );
  }
}

class MultiSplitViewExample extends StatefulWidget {
  @override
  _MultiSplitViewExampleState createState() => _MultiSplitViewExampleState();
}

class _MultiSplitViewExampleState extends State<MultiSplitViewExample> {
  MultiSplitViewController? _controller;
  List<double> _weightsInDatabase = [];

  @override
  Widget build(BuildContext context) {
    Widget buttons = Container(
        child: Row(children: [
          ElevatedButton(child: Text('Show'), onPressed: _onShow),
          SizedBox(width: 16),
          ElevatedButton(
              child: Text('Save and hide'), onPressed: _onSaveAndHide)
        ], crossAxisAlignment: CrossAxisAlignment.center),
        color: Colors.white,
        padding: EdgeInsets.all(8));

    Widget widget;
    if (_controller != null) {
      List<Widget> children = [
        _buildChild(1, Colors.blue),
        _buildChild(2, Colors.green),
        _buildChild(3, Colors.orange)
      ];

      MultiSplitView multiSplitView = MultiSplitView(
          children: children,
          controller: _controller,
          onSizeChange: _onSizeChange);

      widget = MultiSplitViewTheme(
          child: multiSplitView,
          data: MultiSplitViewThemeData(
              dividerPainter: DividerPainters.grooved1()));
    } else {
      widget = Center(child: Text("No MultiSplitView"));
    }

    return Scaffold(
        appBar: AppBar(title: Text('Multi Split View Example')),
        body: Column(children: [buttons, Expanded(child: widget)])
        // body: horizontal,
        );
  }

  Widget _buildChild(int index, Color color) {
    return Container(
      child: Center(child: Text("View $index")),
      color: color,
    );
  }

  void _onSizeChange(int childIndex1, int childIndex2) {
    // save on resize?
    _saveWeights();
  }

  void _saveWeights() {
    _weightsInDatabase = _controller!.weights.toList();
    print(_controller!.weights);
  }

  _onSaveAndHide() {
    if (_controller != null) {
      setState(() {
        _saveWeights();
        _controller = null;
      });
    }
  }

  _onShow() {
    if (_controller == null) {
      setState(() {
        _controller =
            MultiSplitViewController(initialWeights: _weightsInDatabase);
      });
    }
  }
}
j0chn1 commented 2 years ago

Hey @caduandrade, thanks for the answer. Works like a charm. Thank you very much!!!