Stack Container Scrollable Card widget UI with Custom Widget

 import "package:flutter/material.dart";


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Card Container Stack",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.grey,
          centerTitle: true,
        ),
      ),
      home: const CardContainerStack(),
    );
  }
}

class CardContainerStack extends StatelessWidget {
  const CardContainerStack({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Scrollable Containers",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                height: 2700.0,
                width: 500.0,
                child: Stack(
                  children: [
                    UiHelper.customContainer(
                      color: Colors.blue,
                    ),
                    Positioned(
                      top: 100.0,
                      left: 50.0,
                      child: UiHelper.customContainer(
                        color: Colors.brown,
                      ),
                    ),
                    Positioned(
                      top: 200.0,
                      left: 100.0,
                      child: UiHelper.customContainer(
                        color: Colors.teal,
                      ),
                    ),
                    Positioned(
                      top: 300.0,
                      left: 150.0,
                      child: UiHelper.customContainer(
                        color: Colors.yellow,
                      ),
                    ),
                    Positioned(
                      top: 400.0,
                      left: 200.0,
                      child: UiHelper.customContainer(
                        color: Colors.purple,
                      ),
                    ),
                    Positioned(
                      top: 500.0,
                      left: 150.0,
                      child: UiHelper.customContainer(
                        color: Colors.orange,
                      ),
                    ),
                    Positioned(
                      top: 600.0,
                      left: 100.0,
                      child: UiHelper.customContainer(
                        color: Colors.deepPurple,
                      ),
                    ),
                    Positioned(
                      top: 700.0,
                      left: 50.0,
                      child: UiHelper.customContainer(
                        color: Colors.black,
                      ),
                    ),
                    Positioned(
                      top: 800.0,
                      child: UiHelper.customContainer(
                        color: Colors.green,
                      ),
                    ),
                    Positioned(
                      top: 900.0,
                      left: 50.0,
                      child: UiHelper.customContainer(
                        color: Colors.blueGrey,
                      ),
                    ),
                    Positioned(
                      top: 1000.0,
                      left: 100.0,
                      child: UiHelper.customContainer(
                        color: Colors.brown,
                      ),
                    ),
                    Positioned(
                      top: 1100.0,
                      left: 150.0,
                      child: UiHelper.customContainer(
                        color: Colors.cyan,
                      ),
                    ),
                    Positioned(
                      top: 1200.0,
                      left: 200.0,
                      child: UiHelper.customContainer(
                        color: Colors.lightGreen,
                      ),
                    ),
                    Positioned(
                      top: 1300.0,
                      left: 150.0,
                      child: UiHelper.customContainer(
                        color: Colors.red,
                      ),
                    ),
                    Positioned(
                      top: 1400.0,
                      left: 100.0,
                      child: UiHelper.customContainer(
                        color: Colors.blue,
                      ),
                    ),
                    Positioned(
                      top: 1500.0,
                      left: 50.0,
                      child: UiHelper.customContainer(
                        color: Colors.limeAccent,
                      ),
                    ),
                    Positioned(
                      top: 1600.0,
                      child: UiHelper.customContainer(
                        color: Colors.black,
                      ),
                    ),
                    Positioned(
                      top: 1700.0,
                      left: 50.0,
                      child: UiHelper.customContainer(
                        color: Colors.grey,
                      ),
                    ),
                    Positioned(
                      top: 1800.0,
                      left: 100.0,
                      child: UiHelper.customContainer(
                        color: Colors.cyanAccent,
                      ),
                    ),
                    Positioned(
                      top: 1900.0,
                      left: 150.0,
                      child: UiHelper.customContainer(
                        color: Colors.deepPurple,
                      ),
                    ),
                    Positioned(
                      top: 2000.0,
                      left: 200.0,
                      child: UiHelper.customContainer(
                        color: Colors.pink,
                      ),
                    ),
                    Positioned(
                      top: 2100.0,
                      left: 150.0,
                      child: UiHelper.customContainer(
                        color: Colors.black54,
                      ),
                    ),
                    Positioned(
                      top: 2200.0,
                      left: 100.0,
                      child: UiHelper.customContainer(
                        color: Colors.greenAccent,
                      ),
                    ),
                    Positioned(
                      top: 2300.0,
                      left: 50.0,
                      child: UiHelper.customContainer(
                        color: Colors.amber,
                      ),
                    ),
                    Positioned(
                      top: 2400.0,
                      child: UiHelper.customContainer(
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class UiHelper {
  static customContainer({required Color color}) {
    return Card(
      elevation: 20.0,
      child: Container(
        height: 200.0,
        width: 200.0,
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(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