GridView other Example

 import "package:flutter/gestures.dart";

import "package:flutter/material.dart";

void main() {
  runApp(OtherApp(),);
}
class OtherApp extends StatelessWidget {
  OtherApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "GridView Colors",
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: GridViewOtherDemo(),
    );
  }
}
class GridViewOtherDemo extends StatelessWidget {
  GridViewOtherDemo({super.key});

  var arrColors = [Colors.orange, Colors.pink, Colors.grey, Colors.purple, Colors.lime, Colors.deepOrange, Colors.lightGreen,
              Colors.red, Colors.teal, Colors.yellow, Colors.green, Colors.brown, Colors.black, Colors.cyan, Colors.indigo,];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridView Colors"),
      ),
      // body: Column(
      //   children: [
      //     Expanded(
      //       child: ListView.builder(
      //         itemBuilder: (context, index) {
      //           return Padding(
      //             padding: const EdgeInsets.all(8.0),
      //             child: Positioned(
      //               left: 10.0,
      //                 child: Container(width: 200, height: 200, color: arrColors[index],)),
      //           );
      //         },
      //         itemCount: arrColors.length,
      //         scrollDirection: Axis.horizontal,
      //         // shrinkWrap: true,
      //       ),
      //     ),
      //     Expanded(
      //       child: ListView.builder(
      //         itemBuilder: (context, index) {
      //           return MediaQuery.removePadding(
      //             context: context,
      //               removeTop: true,
      //               child: Container(width: 200, height: 200, color: arrColors[index],));
      //         },
      //         itemCount: arrColors.length,
      //         padding: EdgeInsets.only(left: 8.0, right: 8.0, bottom: 8.0,),
      //       ),
      //     ),
      //   ],
      // ),

      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GridView.builder(
                itemBuilder: (context, index) {
                  return Container(color: arrColors[index],);
                },
                itemCount: arrColors.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 11.0,
                  mainAxisSpacing: 11.0,
                ),
                scrollDirection: Axis.horizontal,
                physics: AlwaysScrollableScrollPhysics(),
              ),
            ),
          ),

          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GridView.builder(
                itemBuilder: (context, index) {
                  return Container(color: arrColors[index],);
                },
                itemCount: arrColors.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 11.0,
                  mainAxisSpacing: 11.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Comments

Post a Comment

Popular posts from this blog

Pagination with Bloc Pattern in Flutter

Image
  import "package:flutter/material.dart" ; import "package:flutter_bloc/flutter_bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/event.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/state.dart" ; import "package:pagination_practice/Pagination_with_Bloc/post_repo.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return RepositoryProvider < PostRepo >( create: ( context ) => PostRepo () , child: BlocProvider < PostBloc > ( create: ( context ) => PostBloc ( context.read < PostRepo > () ) ..add ( FetchPostsEvent () ) , child: MaterialApp ( title: "Pagination" , debugShowCheckedModeBa...
Read more

Pagination First Practical in Flutter

Image
  import "package:dio/dio.dart" ; import "package:flutter/material.dart" ; import "package:flutter_spinkit/flutter_spinkit.dart" ; import "package:pagination_practice/Pagination/Model/productModel.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "HomePage" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const HomePage () , ) ; } } class HomePage extends StatefulWidget { const HomePage ( { super .key } ) ; @override State < HomePage > createState () { return HomePageState () ; } } class HomePageState extends State < HomePage > { final ScrollController scrollController = Scrol...
Read more

ExpansionPanel with ExpansionPanelList with Complete Collapse Operation in Flutter

Image
  import "package:flutter/material.dart" ; import "package:sdreatech_learning_widget/All_widgets_Ui/customWidget.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "ExpansionPanel" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const ExpansionPanelListPracticalCollapseTask () , ) ; } } class ExpansionPanelListPracticalCollapseTask extends StatefulWidget { const ExpansionPanelListPracticalCollapseTask ( { super .key } ) ; @override State < ExpansionPanelListPracticalCollapseTask > createState () => _ExpansionPanelListPracticalCollapseTaskState () ; } class _ExpansionPanelListPracticalCollapseTaskState...
Read more