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

Media

Ported from HyperUI’s Media — see Attribution.

Left align top

Section titled “Left align top”
class Media1Example extends StatelessWidget {
  const Media1Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex items-start gap-4',
        children: [
          Style(
            'size-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Left align center

Section titled “Left align center”
class Media2Example extends StatelessWidget {
  const Media2Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex items-center gap-4',
        children: [
          Style(
            'size-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Left align bottom

Section titled “Left align bottom”
class Media3Example extends StatelessWidget {
  const Media3Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex items-end gap-4',
        children: [
          Style(
            'size-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Left align stretch

Section titled “Left align stretch”
class Media4Example extends StatelessWidget {
  const Media4Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex items-stretch gap-4',
        children: [
          Style(
            'w-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Right align top

Section titled “Right align top”
class Media5Example extends StatelessWidget {
  const Media5Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex flex-row-reverse items-start gap-4',
        children: [
          Style(
            'size-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Right align center

Section titled “Right align center”
class Media6Example extends StatelessWidget {
  const Media6Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex flex-row-reverse items-center gap-4',
        children: [
          Style(
            'size-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Right align bottom

Section titled “Right align bottom”
class Media7Example extends StatelessWidget {
  const Media7Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex flex-row-reverse items-end gap-4',
        children: [
          Style(
            'size-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Right align stretch

Section titled “Right align stretch”
class Media8Example extends StatelessWidget {
  const Media8Example({super.key});


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'flex flex-row-reverse items-stretch gap-4',
        children: [
          Style(
            'w-20 rounded object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Style(
                'font-medium text-gray-900 sm:text-lg',
                child: Text('Title goes here'),
              ),
              Style(
                'mt-0.5 text-gray-700',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio '
                  'nesciunt quas non animi.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}