CODEWITHSUNDEEP
flutterdart
Samoilov
Samoilov

Reputation: 29

Create folder with draggable flutter

I am making an android launcher using flutter. I've already made a list of applications using DragAndDropGridView but how can I make it so that folders for icons can be created?

Upvotes: 0

Views: 261

Answers (1)

Yusuf-Uluc
Yusuf-Uluc

Reputation: 1065

I made a sample app as demonstration, but I didn't use the DragAndDropGridView package because it is outdated. Instead I used the reorderables Package.

The Code

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<Widget> apps = <Widget>[
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppFolder(),
    AppIcon()
  ];
  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      Widget row = apps.removeAt(oldIndex);
      apps.insert(newIndex, row);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        ReorderableWrap(
            spacing: 8.0,
            runSpacing: 4.0,
            padding: const EdgeInsets.all(8),
            children: apps,
            onReorder: _onReorder,
            onNoReorder: (int index) {},
            onReorderStarted: (int index) {}),
      ]),
    );
  }
}

class AppIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        width: 100,
        alignment: Alignment.center,
        color: generateRandomColor(),
        child: Text("App Icon"));
  }
}

class AppFolder extends StatefulWidget {
  @override
  _AppFolderState createState() => _AppFolderState();
}

class _AppFolderState extends State<AppFolder> {
  List<Widget> folderApps = <Widget>[
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
  ];

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      Widget row = folderApps.removeAt(oldIndex);
      folderApps.insert(newIndex, row);
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  backgroundColor: Colors.white,
                  content: Container(
                    alignment: Alignment.center,
                    height: 350,
                    width: 350,
                    child: ReorderableWrap(
                        spacing: 8.0,
                        runSpacing: 4.0,
                        padding: const EdgeInsets.all(8),
                        children: folderApps,
                        onReorder: _onReorder,
                        onNoReorder: (int index) {},
                        onReorderStarted: (int index) {}),
                  ),
                );
              });
        },
        child: Image.network(
            "https://icons.iconarchive.com/icons/alecive/flatwoken/512/Apps-Folder-icon.png",
            height: 100,
            width: 100));
  }
}

Color generateRandomColor() {
  Random random = Random();

  return Color.fromARGB(
      255, random.nextInt(256), random.nextInt(256), random.nextInt(256));
}

[Code might not be perfect it is just for demonstration]

I made an app folder using a TextButton that shows an AlertDialog when it is pressed, inside the folder there is again another ReorderableWrap with more apps.

Video

enter image description here (Colors change after each drag because I didn't give a fixed Color don't get confused by it)

Upvotes: 3

Related Questions