Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Sections

Ported from HyperUI’s Sections — see Attribution.

Content with image, 1/2 grid

Section titled “Content with image, 1/2 grid”
class Sections1Example extends StatelessWidget {
  const Sections1Example({super.key});


  static const _photoUrl =
      'https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-4 md:grid-cols-2 md:items-center md:gap-8',
        children: [
          const Style(
            'max-w-prose md:max-w-none',
            children: [
              Style(
                'text-2xl font-semibold text-gray-900 sm:text-3xl',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                ),
              ),
              Style(
                'mt-4 text-pretty text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe '
                  'architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas '
                  'sequi.',
                ),
              ),
            ],
          ),
          Style('rounded', child: Image.network(_photoUrl, fit: BoxFit.cover)),
        ],
      ),
    );
  }
}

Content with image, 2/3 grid

Section titled “Content with image, 2/3 grid”
class Sections2Example extends StatelessWidget {
  const Sections2Example({super.key});


  static const _photoUrl =
      'https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-4 md:grid-cols-4 md:items-center md:gap-8',
        children: [
          const Style(
            'md:col-span-1',
            child: Style(
              'max-w-prose md:max-w-none',
              children: [
                Style(
                  'text-2xl font-semibold text-gray-900 sm:text-3xl',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                  ),
                ),
                Style(
                  'mt-4 text-pretty text-gray-700',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe '
                    'architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas '
                    'sequi.',
                  ),
                ),
              ],
            ),
          ),
          Style(
            'md:col-span-3',
            child: Style(
              'rounded',
              child: Image.network(_photoUrl, fit: BoxFit.cover),
            ),
          ),
        ],
      ),
    );
  }
}

Content with image, 3/2 grid

Section titled “Content with image, 3/2 grid”
class Sections3Example extends StatelessWidget {
  const Sections3Example({super.key});


  static const _photoUrl =
      'https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-4 md:grid-cols-4 md:items-center md:gap-8',
        children: [
          Style(
            'md:col-span-3',
            child: Style(
              'rounded',
              child: Image.network(_photoUrl, fit: BoxFit.cover),
            ),
          ),
          const Style(
            'md:col-span-1',
            child: Style(
              'max-w-prose md:max-w-none',
              children: [
                Style(
                  'text-2xl font-semibold text-gray-900 sm:text-3xl',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                  ),
                ),
                Style(
                  'mt-4 text-pretty text-gray-700',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe '
                    'architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas '
                    'sequi.',
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Content with image, vertical split

Section titled “Content with image, vertical split”
class Sections4Example extends StatelessWidget {
  const Sections4Example({super.key});


  static const _photoUrl =
      'https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'space-y-4 md:space-y-8',
        children: [
          const Style(
            'max-w-prose',
            children: [
              Style(
                'text-2xl font-semibold text-gray-900 sm:text-3xl',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                ),
              ),
              Style(
                'mt-4 text-pretty text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe '
                  'architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas '
                  'sequi.',
                ),
              ),
            ],
          ),
          Style('rounded', child: Image.network(_photoUrl, fit: BoxFit.cover)),
        ],
      ),
    );
  }
}