How do I create a folder-shaped container in Flutter?

WilliamKose
August 13, 2024
153 views
0 votes
2 Answers

I want to create a folder-shaped container in Flutter (with curves at the top of the container), something like this:

And I need the borders to be customizable (container colors, border colors, etc.). Is this possible with native Flutter, or do I need a package?

Tags: dart flutter

Answers

To create a folder-shaped container in Flutter, you can use the Clip Path widget along with a custom Path to draw the folder shape. Below is an example of how you can achieve this:

class FolderClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = Path();

    path.moveTo(0, size.height * 0.2); // Start from the left side
    path.lineTo(size.width * 0.25, size.height * 0.2); // Draw the top-left tab
    path.lineTo(size.width * 0.35, 0); // Draw the top slope of the folder tab
    path.lineTo(size.width * 0.75, 0); // Draw the top-right slope of the folder tab
    path.lineTo(size.width * 0.85, size.height * 0.2); // Draw the top-right tab
    path.lineTo(size.width, size.height * 0.2); // Draw the right side
    path.lineTo(size.width, size.height); // Draw the bottom-right corner
    path.lineTo(0, size.height); // Draw the bottom-left corner
    path.close(); // Close the path

    return path;
  }

      @override
      bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
        return false;
      }
}

Use it like:

ClipPath(
  clipper: FolderClipper(),
  // ...
),

Purple folder container with a keyboard icon

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: Transform(
                transform: Matrix4.rotationY(3.14159), // Flip horizontally
                alignment: Alignment.center,
                child: FolderContainer(
                  child: Icon(Icons.keyboard, size: 50, color: Colors.white),
                ),
              ),
            ),
          ),
        );
      }
    }
    
    class FolderContainer extends StatelessWidget {
      final Widget child;
    
      FolderContainer({required this.child});
    
      @override
      Widget build(BuildContext context) {
        return ClipPath(
          clipper: FolderClipper(),
          child: Container(
            width: 150,
            height: 120,
            color: Colors.purple,
            child: Center(child: child),
          ),
        );
      }
    }
    
    class FolderClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        final path = Path();
        double w = size.width;
        double h = size.height;
    
        path.moveTo(0, h * 0.1);
        path.lineTo(w * 0.6, h * 0.1);
        path.lineTo(w * 0.7, 0);
        path.lineTo(w, 0);
        path.lineTo(w, h);
        path.lineTo(0, h);
        path.close();
    
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) => false;
    }

Explanation:
ClipPath: This widget is used to clip its child using a custom shape defined by CustomClipper.
FolderClipper: This class defines the shape of the folder using a Path. The path is drawn based on the size of the container.
FolderContainer: This is the widget that combines the custom clipper and a Container with a specific color and child.

Customization:
You can adjust the width, height, and shape points in the FolderClipper to match the exact proportions and style of the folder icon you want.
The Icon inside the folder container can be replaced with any other widget.
This code creates a folder-shaped container similar to the one in the image you provided. You can further tweak the shape and size to match the exact design you need.

Please signup or login to give your own answer.

Click here to cancel reply.