caduandrade / multi_split_view

Provides horizontal or vertical multiple split view for Flutter.

Home Page:https://caduandrade.github.io/multi_split_view/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

j0chn1 opened this issue · comments

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.

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

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