flutter_stretchable_widgets 0.0.2

flutter_stretchable_widgets: ^0.0.2 copied to clipboard

example/lib/main.dart

// ignore_for_file: avoid_print

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stretchable_widgets/widget/stretchable_panel_view.dart';

void main() => runApp(const App());

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => AppState();
}

class AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: Home()));
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        /// the left one
        Positioned(
          left: 0,
          right: 0,
          bottom: 80,
          child: StretchablePanelWidget(
            isInitShowStretchWidget: true,
            widgetsBuilder: (context, state) {
              if (state.showingTriggeredWidget) {
                return Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.symmetric(horizontal: 16),
                  padding: EdgeInsets.zero,
                  decoration: null,
                  child: CupertinoButton(
                    padding: EdgeInsets.zero,
                    child: Container(
                      width: 48,
                      height: 48,
                      padding: const EdgeInsets.all(13),
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(24),
                      ),
                      child: const Icon(Icons.add, color: Colors.white, size: 22),
                    ),
                    onPressed: () {
                      state.show().then((value) {
                        print('########## show done!');
                      });
                    },
                  ),
                );
              } else {
                return Container(
                  padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Flexible(
                            child: Text(
                              'Please take 5 minutes to introduce P7',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ),
                          Flexible(
                            child: CupertinoButton(
                              padding: EdgeInsets.zero,
                              child: const Icon(Icons.close_outlined, color: Colors.white, size: 24),
                              onPressed: () {
                                state.hide().then((value) {
                                  print('########## hide done!');
                                });
                              },
                            ),
                          ),
                        ],
                      ),
                      const Text(
                        '1、Client is an office worker around 30 years old'
                        '\n'
                        '2、I want a family car, about 200,000'
                        '\n'
                        '3、Urban TESLA assisted driving'
                        '\n'
                        '4、Faster car',
                        style: TextStyle(color: Colors.white, fontSize: 14, overflow: TextOverflow.ellipsis),
                      ),
                    ],
                  ),
                );
              }
            },
            animatingBuilder: (context, child, w, h) {
              return Container(
                alignment: Alignment.centerLeft,
                margin: const EdgeInsets.symmetric(horizontal: 16),
                child: Container(
                  width: w,
                  height: h,
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.7),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: child,
                ),
              );
            },
          ),
        ),

        /// the right one
        Positioned(
          left: 0,
          right: 0,
          bottom: 80,
          child: StretchablePanelWidget(
            widgetsBuilder: (context, state) {
              if (state.showingTriggeredWidget) {
                return Container(
                  alignment: Alignment.centerRight,
                  margin: const EdgeInsets.symmetric(horizontal: 16),
                  padding: EdgeInsets.zero,
                  decoration: null,
                  child: CupertinoButton(
                    padding: EdgeInsets.zero,
                    child: Container(
                      width: 48,
                      height: 48,
                      padding: const EdgeInsets.all(13),
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(24),
                      ),
                      child: const Icon(Icons.add, color: Colors.white, size: 22),
                    ),
                    onPressed: () {
                      state.show().then((value) {
                        print('########## show done!');
                      });
                    },
                  ),
                );
              } else {
                return Container(
                  padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Flexible(
                            child: Text(
                              'Please take 5 minutes to introduce P7',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ),
                          Flexible(
                            child: CupertinoButton(
                              padding: EdgeInsets.zero,
                              child: const Icon(Icons.close_outlined, color: Colors.white, size: 24),
                              onPressed: () {
                                state.hide().then((value) {
                                  print('########## hide done!');
                                });
                              },
                            ),
                          ),
                        ],
                      ),
                      const Text(
                        '1、Client is an office worker around 30 years old'
                        '\n'
                        '2、I want a family car, about 200,000'
                        '\n'
                        '3、Urban TESLA assisted driving'
                        '\n'
                        '4、Faster car',
                        style: TextStyle(color: Colors.white, fontSize: 14, overflow: TextOverflow.ellipsis),
                      ),
                    ],
                  ),
                );
              }
            },
            animatingBuilder: (context, child, w, h) {
              return Container(
                alignment: Alignment.centerRight,
                margin: const EdgeInsets.symmetric(horizontal: 16),
                child: Container(
                  width: w,
                  height: h,
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.7),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: child,
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}