Custom_Design

custom_picker.dart

import 'package:flutter/cupertino.dart';
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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _incrementCounter() {
    setState(() {
      CustomPicker().samplePicker(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'CustomPicker',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class CustomPicker {
  void samplePicker(
    BuildContext context,
  ) {
    showCupertinoModalPopup<void>(
      barrierDismissible: false,
      context: context,
      builder: (BuildContext context) {
        final timerList = <String>[];

        /// Custom Widget
        for (var i = 0; i < 100; i++) {
          timerList.add('$i');
        }
        return SingleChildScrollView(
          physics: const NeverScrollableScrollPhysics(),
          child: GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  color: Colors.transparent,
                  height: MediaQuery.of(context).size.height / 1.5,
                ),
                DecoratedBox(
                  decoration: const BoxDecoration(
                    color: Colors.grey,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      CupertinoButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        padding: const EdgeInsets.symmetric(
                          horizontal: 16.0,
                          vertical: 5.0,
                        ),
                        child: const Text(
                          'Complete',
                        ),
                      ),
                    ],
                  ),
                ),
                _picker(
                  context,
                  CupertinoPicker(
                    backgroundColor: Colors.green,
                    itemExtent: 50,
                    onSelectedItemChanged: (int value) {},
                    children: [
                      for (final v in timerList)
                        DefaultTextStyle(
                          style: const TextStyle(
                            fontSize: 44,
                            color: Colors.red,
                          ),
                          child: Container(
                            padding: EdgeInsets.only(
                                right: int.parse(v) < 10 ? 0 : 20),
                            alignment: Alignment.center,
                            child: Text(
                              '$v value',
                              textAlign: TextAlign.right,
                            ),
                          ),
                        ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  /// Custom Widget
  Widget _picker(
    BuildContext context,
    Widget picker,
  ) {
    return Material(
      child: SizedBox(
        height: MediaQuery.of(context).size.height / 4,
        child: Stack(
          children: [
            picker,
            Container(
              padding: const EdgeInsets.only(right: 80),
              alignment: Alignment.center,
              child: const Text(
                ':',
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2022-10-12.23.51.46.mov