draggable_sheet 1.0.1+3 copy "draggable_sheet: ^1.0.1+3" to clipboard
draggable_sheet: ^1.0.1+3 copied to clipboard

`Draggable Sheet` - Enhance your Flutter apps with customizable, interactive bottom sheets featuring dynamic height adjustments for superior user experiences.

example/lib/main.dart

import 'dart:math';

import 'package:draggable_sheet/draggable_sheet.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// import 'package:draggable_sheet/draggable_sheet.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var list = List.generate(10, (index) {
    return (
      Colors.primaries[Random().nextInt(Colors.primaries.length)]
          .withOpacity(1),
      index,
    );
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            height: 100 + kBottomNavigationBarHeight,
            child: Row(
              children: [
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: SizedBox(
                      height: 100,
                      child: TextFormField(
                        decoration: const InputDecoration(
                          label: Padding(
                            padding: EdgeInsets.all(0),
                            child: Text("Enter the number of cards"),
                          ),
                          labelStyle: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w500,
                            // height: 0,
                          ),
                          floatingLabelAlignment: FloatingLabelAlignment.start,
                        ),
                        textInputAction: TextInputAction.done,
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly,
                        ],
                        textAlign: TextAlign.start,
                        onTapOutside: (event) {
                          FocusScope.of(context).unfocus();
                        },
                        onChanged: (value) {
                          final intValue = int.tryParse(value) ?? 1;
                          setState(() {
                            list = List.generate(intValue, (index) {
                              return (
                                Colors.primaries[Random()
                                        .nextInt(Colors.primaries.length)]
                                    .withOpacity(1),
                                index
                              );
                            });
                          });
                        },
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          Positioned.fill(
            child: () {
              final mediaQuery = MediaQuery.of(context);
              final height = mediaQuery.size.height;
              return DraggableSheet(
                minHeight:
                    (kBottomNavigationBarHeight * 2 + (0.25 * height)) / height,
                maxHeight: 1,
                itemHeight: 0.25 * height,
                list: List.generate(list.length, (index) {
                  return (
                    HomeProfileItemView(
                      index: index,
                      itemHeight: 0.25 * height,
                      item: list[index],
                    ),
                    index
                  );
                }),
                didSelectItem: (index) {
                  var tempList = List<(Color, int)>.from(list);
                  final tempSelectedItem = tempList[index];
                  tempList.removeAt(index);
                  tempList.insert(tempList.length, tempSelectedItem);
                  setState(() {
                    list = tempList;
                  });
                },
              );
            }(),
          ),
        ],
      ),
    );
  }
}

class HomeProfileItemView extends StatefulWidget {
  const HomeProfileItemView({
    super.key,
    required this.index,
    required this.itemHeight,
    required this.item,
    this.onTap,
  });

  final int index;
  final double itemHeight;
  final (Color, int) item;
  final void Function()? onTap;

  @override
  State<HomeProfileItemView> createState() => _HomeProfileItemViewState();
}

class _HomeProfileItemViewState extends State<HomeProfileItemView> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: Card(
        color: Colors.transparent,
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        child: SizedBox(
          height: widget.itemHeight,
          child: Container(
            decoration: BoxDecoration(
              color: widget.item.$1,
              borderRadius: BorderRadius.circular(15),
            ),
            alignment: Alignment.center,
            child: Text(
              widget.item.$2.toString(),
              style: const TextStyle(
                fontSize: 26,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
5
likes
160
points
5
downloads

Publisher

unverified uploader

Weekly Downloads

`Draggable Sheet` - Enhance your Flutter apps with customizable, interactive bottom sheets featuring dynamic height adjustments for superior user experiences.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter, get

More

Packages that depend on draggable_sheet