モバイル版Discodeのような画面の動きを作ってみた

はじめに

この記事は私が気になったことや主にパッケージなど挙げていき自分の為の記録または
参考になればと思い書いています。
自分自身ググり力などまだまだなので
少しでも同じような方の手助けになればと思って記事を書いています。

今回紹介するパッケージ

モバイル版のDiscodeのUIがすごくて自分でも作りたいなと思って作ろうと思いました。

検索をかけてみたところ(ググり力足りなくて知人に調べて見つけてもらえました)
このような記事を発見しました。

この記事を参考にしながら簡単なアプリを作っていこうと思います。
パッケージはこちらになります。

Tarminalで

$ flutter pub add overlapping_panels

と打ってpabspeck.yamlに追加すると準備完了です。

それぞれCenter,Left,RightのView画面を作った後にDiscodeのような動きになる画面を作成します。
(Center,Left RightPageは今回Textのみの表示になるので簡単に作れると思うので割愛しています)

コード

import 'center_page.dart';
import 'package:discode/left_page.dart';
import 'package:discode/right_page.dart';
import 'package:flutter/material.dart';
import 'package:overlapping_panels/overlapping_panels.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        OverlappingPanels(
          left: Builder(builder: (context) {
            return const LeftPage();
          }),
          right: Builder(
            builder: (context) => const RightPage(),
          ),
          main: Builder(
            builder: (context) {
              return const CenterPage();
            },
          ),
        ),
      ],
    );
  }
}

ここではOverlappingPanelのpackageを使ってそれぞれ動かして表示したい場所にSet
していきます。

そうすると...

Discodeのような画面の動きになりました！

OverlappingPanelsの中のプロパティにonSideChangeがあるのですがまだ自分は理解できていない部分がある為この記事では割愛させて頂いてます
またこのパッケージを使って何か作成する際に使うことがあれば記事にしたいと思います。

以上Discodeの動きになるようなOverlappingPanelsパッケージの紹介でした。

何かご指摘や質問があればコメントでお気軽にご指摘等頂けると嬉しいです
この記事を読んで何かと参考になればと思います。