Created
September 15, 2025 13:41
-
-
Save hectorAguero/dfde200490815b09becce1e33c2e8886 to your computer and use it in GitHub Desktop.
How GridView AspectRatio works
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(const MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| // Data model for the grid items: a list of colors. | |
| // This could be fetched from an API or database in a real application. | |
| final List<Color> gridItemColors = [ | |
| Colors.red.shade400, | |
| Colors.green.shade400, | |
| Colors.blue.shade400, | |
| Colors.yellow.shade400, | |
| Colors.purple.shade400, | |
| Colors.orange.shade400, | |
| Colors.teal.shade400, | |
| Colors.cyan.shade400, | |
| Colors.pink.shade400, | |
| Colors.indigo.shade400, | |
| Colors.brown.shade400, | |
| Colors.lime.shade400, | |
| Colors.amber.shade400, | |
| Colors.deepPurple.shade400, | |
| Colors.lightBlue.shade400, | |
| Colors.deepOrange.shade400, | |
| Colors.lightGreen.shade400, | |
| Colors.grey.shade400, | |
| Colors.blueGrey.shade400, | |
| Colors.black54, | |
| Colors.red.shade700, | |
| Colors.green.shade700, | |
| Colors.blue.shade700, | |
| Colors.yellow.shade700, | |
| Colors.purple.shade700, | |
| Colors.orange.shade700, | |
| Colors.teal.shade700, | |
| Colors.cyan.shade700, | |
| Colors.pink.shade700, | |
| Colors.indigo.shade700, | |
| ]; | |
| return MaterialApp( | |
| debugShowCheckedModeBanner: false, | |
| home: Scaffold( | |
| appBar: AppBar( | |
| title: const Text('Interactive Grid View'), | |
| backgroundColor: Theme.of(context).colorScheme.primary, | |
| foregroundColor: Theme.of(context).colorScheme.onPrimary, | |
| ), | |
| body: GridView.count( | |
| crossAxisCount: 3, // Number of items in each row | |
| crossAxisSpacing: 12.0, // Horizontal space between items | |
| mainAxisSpacing: 12.0, // Vertical space between items | |
| childAspectRatio: 3.5, | |
| padding: const EdgeInsets.all(12.0), // Padding around the grid | |
| children: gridItemColors.map<Widget>((color) { | |
| final int index = gridItemColors.indexOf(color); | |
| return GridItem( | |
| color: color, | |
| text: 'Item ${index + 1}', | |
| onTap: () { | |
| // In a real app, this would trigger a specific action | |
| // related to the tapped grid item, e.g., navigating | |
| // to a detail page or performing a data operation. | |
| debugPrint('Tapped on Item ${index + 1}'); | |
| }, | |
| ); | |
| }).toList(), | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class GridItem extends StatelessWidget { | |
| final Color color; | |
| final String text; | |
| final VoidCallback onTap; | |
| const GridItem({ | |
| required this.color, | |
| required this.text, | |
| required this.onTap, | |
| super.key, | |
| }); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Card( | |
| elevation: 4, | |
| shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), | |
| clipBehavior: Clip.antiAlias, | |
| child: InkWell( | |
| onTap: onTap, | |
| child: Container( | |
| decoration: BoxDecoration( | |
| color: color, | |
| borderRadius: BorderRadius.circular(10), | |
| ), | |
| alignment: Alignment.center, | |
| child: Padding( | |
| padding: const EdgeInsets.all(8.0), | |
| child: Text( | |
| text, | |
| style: const TextStyle( | |
| color: Colors.white, | |
| fontSize: 20, | |
| fontWeight: FontWeight.bold, | |
| ), | |
| textAlign: TextAlign.center, | |
| ), | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment