ScrollableView

main.dart

import 'package:flutter/material.dart';

// import 'blocks/block1.dart';
// import 'blocks/block2.dart';
// import 'blocks/block3.dart';
// import 'blocks/block4.dart';

void main() {
  runApp(ScrollableView());
}

class ScrollableView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
//         child: Column(
      shrinkWrap: true,
      itemExtent: 200,
      children: <Widget>[
        BlockOne(),
        Container(
          color: Colors.black,
        ),
        BlockOne(),
        Text('Hello'),
        BlockOne(),
        Container(
          color: Colors.black,
        ),
        BlockOne(),
        //BlockTwo(),
        //BlockThree(),
        //BlockFour()
      ],
//         ),
    ));
  }
}

class BlockOne extends StatefulWidget {
  @override
  _BlockOneState createState() => _BlockOneState();
}

class _BlockOneState extends State<BlockOne> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
//         if (constraints.maxWidth > 1024)
//           return Desktop();
//         else
        return Mobile();
      },
    );
  }
}

class Desktop extends StatefulWidget {
  @override
  _DesktopState createState() => _DesktopState();
}

class _DesktopState extends State<Desktop> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Desktop'),
    );
  }
}

class Mobile extends StatefulWidget {
  @override
  _MobileState createState() => _MobileState();
}

class _MobileState extends State<Mobile> {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size(double.infinity, double.infinity),
      painter: MobilePainter(),
    );
  }
}

class MobilePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final height = size.height;
    final width = size.width;
    Paint paint = Paint();
    paint.color = Colors.green;

    Path background = Path();
    background.addRect(Rect.fromLTRB(0, 0, width, height));
    canvas.drawPath(background, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}