Bento Grids

class TiltExample extends StatelessWidget {
  const TiltExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: const EdgeInsets.all(32),
              decoration: BoxDecoration(
                color: const Color(0xFF010101),
                borderRadius: BorderRadius.circular(24),
              ),
              child: Row(
                children: [
                  Tilt(
                    tiltConfig: const TiltConfig(angle: 2, enableGestureSensors: false),
                    child: TiltBaseContainer(
                      lightConfig: const LightConfig(
                        enableReverse: true,
                        color: Color(0xFF4A3186),
                        spreadFactor: 2,
                      ),
                      shadowConfig: const ShadowBaseConfig(disable: true),
                      borderRadius: BorderRadius.circular(12),
                      border: Border.all(
                        color: const Color(0xFF181818),
                        width: 2,
                        strokeAlign: BorderSide.strokeAlignOutside,
                      ),
                      filterQuality: FilterQuality.high,
                      child: Container(
                        width: 250,
                        height: 500,
                        color: const Color(0xFF010101),
                        padding: EdgeInsets.all(20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  children: [
                                    Text(
                                      'Flutter Tilt',
                                      style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.grey,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    SizedBox(width: 6),
                                    Icon(
                                      Icons.arrow_right_alt,
                                      size: 16,
                                      color: Colors.grey,
                                    ),
                                  ],
                                ),
                                Text(
                                  'Widget',
                                  style: TextStyle(
                                    fontSize: 24,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                            Image.asset('assets/bento_grids/1.png'),
                          ],
                        ),
                      ),
                    ),
                  ),
                  SizedBox(width: 24),
                  Column(
                    children: [
                      Tilt(
                        tiltConfig: const TiltConfig(angle: 2, enableGestureSensors: false),
                        child: TiltBaseContainer(
                          lightConfig: const LightConfig(
                            enableReverse: true,
                            color: Color(0xFF4A3186),
                            spreadFactor: 2,
                          ),
                          shadowConfig: const ShadowBaseConfig(disable: true),
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(
                            color: const Color(0xFF181818),
                            width: 2,
                            strokeAlign: BorderSide.strokeAlignOutside,
                          ),
                          filterQuality: FilterQuality.high,
                          child: Container(
                            width: 500,
                            height: 237,
                            color: const Color(0xFF010101),
                            padding: EdgeInsets.all(20).copyWith(right: 0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      children: [
                                        Text(
                                          'Flutter Tilt',
                                          style: TextStyle(
                                            fontSize: 16,
                                            color: Colors.grey,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        SizedBox(width: 6),
                                        Icon(
                                          Icons.arrow_right_alt,
                                          size: 16,
                                          color: Colors.grey,
                                        ),
                                      ],
                                    ),
                                    Text(
                                      'Element',
                                      style: TextStyle(
                                        fontSize: 24,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                                Image.asset('assets/bento_grids/2.png'),
                              ],
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 24),
                      Tilt(
                        tiltConfig: const TiltConfig(angle: 2, enableGestureSensors: false),
                        child: TiltBaseContainer(
                          lightConfig: const LightConfig(
                            enableReverse: true,
                            color: Color(0xFF4A3186),
                            spreadFactor: 2,
                          ),
                          shadowConfig: const ShadowBaseConfig(disable: true),
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(
                            color: const Color(0xFF181818),
                            width: 2,
                            strokeAlign: BorderSide.strokeAlignOutside,
                          ),
                          filterQuality: FilterQuality.high,
                          child: Container(
                            width: 500,
                            height: 237,
                            color: const Color(0xFF010101),
                            padding: EdgeInsets.all(20).copyWith(right: 0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      children: [
                                        Text(
                                          'Flutter Tilt',
                                          style: TextStyle(
                                            fontSize: 16,
                                            color: Colors.grey,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        SizedBox(width: 6),
                                        Icon(
                                          Icons.arrow_right_alt,
                                          size: 16,
                                          color: Colors.grey,
                                        ),
                                      ],
                                    ),
                                    Text(
                                      'RenderObject',
                                      style: TextStyle(
                                        fontSize: 24,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                                Image.asset('assets/bento_grids/3.png'),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}