Skip to content

Latest commit

 

History

History
41 lines (32 loc) · 1013 Bytes

grid_item.md

File metadata and controls

41 lines (32 loc) · 1013 Bytes

GridItem

How to use it?

Dart

import 'package:responsive_styles/responsive_styles.dart';
  • GridItem is an abstraction to allow you to use Row and Column in a responsive way. You are able to combine it with Responsive and change which component will be used in a declarative way
  • By default every GridItem is a Column
class WidgetWithResponsiveOutput extends StatelessWidget {
  const WidgetWithResponsiveOutput({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    var responsive = Responsive(context);
    return GridItem(
          /* Here */
          as: responsive.value({
            Breakpoints.xs: Column,
            Breakpoints.md: Row,
          }),
          /* Here */
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Button clicks:'),
          ],
        );
  }
}

JavaScript

  • Comming Soon...