Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Preview

Code

ShadButton.outline(
 text: const Text('Open'),
 onPressed: () => showShadSheet(
   side: ShadSheetSide.right,
   context: context,
   builder: (context) => const EditProfileSheet(),
 ),
),

final profile = [
 (title: 'Name', value: 'Alexandru'),
 (title: 'Username', value: 'nank1ro'),
];

class EditProfileSheet extends StatelessWidget {
 const EditProfileSheet({super.key, required this.side});

 final ShadSheetSide side;

 BoxConstraints get constraints {
   return switch (side) {
     ShadSheetSide.top ||
     ShadSheetSide.bottom =>
       BoxConstraints.tightFor(width: MediaQuery.sizeOf(context).width),
     ShadSheetSide.left || ShadSheetSide.right => BoxConstraints.tightFor(
         height: MediaQuery.sizeOf(context).height,
         width: 512,
       ),
   };
 }


 @override
 Widget build(BuildContext context) {
   final theme = ShadTheme.of(context);
   return ShadSheet(
     constraints: constraints,
     title: const Text('Edit Profile'),
     description: const Text(
         "Make changes to your profile here. Click save when you're done"),
     content: Padding(
         padding: const EdgeInsets.symmetric(vertical: 20),
         child: Column(
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: profile
               .map(
                 (p) => Row(
                   children: [
                     Expanded(
                       child: Text(
                         p.title,
                         textAlign: TextAlign.end,
                         style: theme.textTheme.small,
                       ),
                     ),
                     const SizedBox(width: 16),
                     Expanded(
                       flex: 5,
                       child: ShadInput(initialValue: p.value),
                     ),
                   ],
                 ),
               )
               .toList(),
       ),
     ),
     actions: const [
       ShadButton(text: Text('Save changes')),
     ],
   );
 }
}

Side

Use the side property to showShadSheet to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Preview

Code

Row(
 mainAxisSize: MainAxisSize.min,
 children: [
   Column(
     mainAxisSize: MainAxisSize.min,
     children: [
       ShadButton.outline(
         width: 100,
         text: const Text('Top'),
         onPressed: () => showShadSheet(
           side: ShadSheetSide.top,
           context: context,
           builder: (context) =>
               const EditProfileSheet(side: ShadSheetSide.top),
         ),
       ),
       ShadButton.outline(
         width: 100,
         text: const Text('Bottom'),
         onPressed: () => showShadSheet(
           side: ShadSheetSide.bottom,
           context: context,
           builder: (context) => const EditProfileSheet(
               side: ShadSheetSide.bottom),
         ),
       ),
     ],
   ),
   Column(
     mainAxisSize: MainAxisSize.min,
     children: [
       ShadButton.outline(
         width: 100,
         text: const Text('Right'),
         onPressed: () => showShadSheet(
           side: ShadSheetSide.right,
           context: context,
           builder: (context) => const EditProfileSheet(
               side: ShadSheetSide.right),
         ),
       ),
       ShadButton.outline(
         width: 100,
         text: const Text('Left'),
         onPressed: () => showShadSheet(
           side: ShadSheetSide.left,
           context: context,
           builder: (context) => const EditProfileSheet(
               side: ShadSheetSide.left),
         ),
       ),
     ],
   ),
 ],
),

// See EditProfileSheet code in the previous code example