d_input 0.6.0 copy "d_input: ^0.6.0" to clipboard
d_input: ^0.6.0 copied to clipboard

Build faster input with default border style

example/lib/main.dart

import 'package:d_input/d_input.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TestDInput(),
    );
  }
}

class TestDInput extends StatefulWidget {
  const TestDInput({super.key});

  @override
  State<TestDInput> createState() => _TestDInputState();
}

class _TestDInputState extends State<TestDInput> {
  final controller1 = TextEditingController();
  final controller2 = TextEditingController();
  final controller3 = TextEditingController();
  final controller4 = TextEditingController();
  final controller5 = TextEditingController();
  final controller6 = TextEditingController();
  final controller7 = TextEditingController();
  final controller8 = TextEditingController();
  final controller9 = TextEditingController();
  final controller10 = TextEditingController();
  final controller11 = TextEditingController();
  bool obscure = false;

  List<String> levels = [
    'Beginner',
    'Junior',
    'Intermediet',
    'Senior',
    'Expert',
  ];
  String dropdownValue1 = 'Beginner';
  String dropdownValue2 = 'Beginner';
  String dropdownValue3 = 'Beginner';
  final focusNode6 = FocusNode();

  @override
  void dispose() {
    focusNode6.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('D Input'),
        centerTitle: true,
      ),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          DInput(
            controller: TextEditingController(),
          ),
          const SizedBox(height: 20),
          DInputPassword(
            controller: TextEditingController(),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller1,
            hint: 'sample mix 1',
            noBoxBorder: true,
            inputOnFieldSubmitted: (value) {
              print('submit: $value');
            },
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller2,
            title: 'Description',
            hint: 'sample mix 2',
            minLine: 3,
            maxLine: 5,
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller3,
            hint: 'sample mix 3',
            boxColor: Theme.of(context).primaryColor.withValues(alpha: 0.4),
            hintStyle: const TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 14,
              color: Colors.white,
            ),
            inputStyle: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 14,
              color: Colors.white,
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller4,
            hint: 'sample mix 4',
            boxRadius: 8,
            boxBorder: Border.all(
              width: 2,
              color: Colors.green,
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller5,
            hint: 'sample mix 5',
            prefixIcon: IconSpec(
              icon: Icons.email,
              backgroundColor: Colors.blue.shade100,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20),
                bottomLeft: Radius.circular(20),
              ),
              onTap: () => print('Icons.email'),
            ),
            suffixIcon: IconSpec(
              icon: Icons.verified,
              onTap: () {
                // cursor move to sample mix 6
                focusNode6.requestFocus();
              },
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller6,
            inputFocusNode: focusNode6,
            hint: 'sample mix 6',
            inputPadding: const EdgeInsets.symmetric(vertical: 16),
            prefixIcon: const IconSpec(
              icon: Icons.email,
              color: Colors.green,
            ),
            suffixIcon: const IconSpec(
              icon: Icons.verified,
              color: Colors.blue,
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller7,
            hint: 'sample mix 7',
            inputPadding: const EdgeInsets.symmetric(
              vertical: 8,
              horizontal: 12,
            ),
            inputMargin: const EdgeInsets.symmetric(vertical: 8),
            inputBackgroundColor: Colors.amber.withValues(alpha: 0.3),
            inputRadius: 10,
            prefixIcon: const IconSpec(
              icon: Icons.email,
              color: Colors.green,
            ),
            suffixIcon: const IconSpec(
              icon: Icons.verified,
              color: Colors.blue,
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller8,
            hint: 'sample mix 8',
            inputPadding: const EdgeInsets.symmetric(
              vertical: 8,
              horizontal: 12,
            ),
            inputBackgroundColor: Colors.amber.withValues(alpha: 0.3),
            inputRadius: 12,
            prefixIcon: const IconSpec(
              icon: Icons.email,
              color: Colors.green,
              alignment: Alignment(0.3, 0),
              boxSize: Size(40, 56),
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller9,
            hint: 'sample mix 9',
            minLine: 3,
            maxLine: 3,
            crossAxisAlignmentBox: CrossAxisAlignment.start,
            inputPadding: const EdgeInsets.symmetric(
              vertical: 8,
              horizontal: 12,
            ),
            inputMargin: const EdgeInsets.symmetric(vertical: 8),
            inputBackgroundColor: Colors.grey.withValues(alpha: 0.2),
            inputRadius: 12,
            prefixIcon: const IconSpec(
              icon: Icons.image,
              color: Colors.green,
            ),
            suffixIcon: const IconSpec(
              icon: Icons.send,
              color: Colors.blue,
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller10,
            hint: 'sample mix 10..\nline 2..\nline 3..',
            crossAxisAlignmentBox: CrossAxisAlignment.start,
            boxBorder: Border.all(color: Colors.transparent),
            boxColor: Theme.of(context).primaryColor.withValues(alpha: 0.3),
            boxRadius: 10,
            minLine: 3,
            maxLine: 3,
            inputPadding: const EdgeInsets.symmetric(vertical: 16),
            prefixIcon: const IconSpec(icon: Icons.description),
          ),
          const SizedBox(height: 20),
          DInputMix(
            controller: controller11,
            title: 'Choose Date',
            hint: 'sample mix 11',
            crossAxisAlignmentTitle: CrossAxisAlignment.end,
            inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
            boxRadius: 20,
            suffixIcon: IconSpec(
              icon: Icons.event,
              splashColor: Colors.green.shade300,
              margin: const EdgeInsets.all(2),
              radius: 20 - 2,
              onTap: () {
                // date picker and set to controller
              },
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            title: 'Left Children',
            hint: 'sample mix 12',
            inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
            boxRadius: 20,
            prefixIcon: IconSpec(
              icon: Icons.event,
              onTap: () {},
            ),
            leftChildren: const [
              Icon(Icons.reset_tv),
              Icon(Icons.ac_unit),
            ],
          ),
          const SizedBox(height: 20),
          DInputMix(
            title: 'Right Children',
            hint: 'sample mix 13',
            inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
            boxRadius: 20,
            rightChildren: const [
              Icon(Icons.reset_tv),
              Icon(Icons.ac_unit),
            ],
            suffixIcon: IconSpec(
              icon: Icons.event,
              onTap: () {},
            ),
          ),
          const SizedBox(height: 20),
          DInputMix(
            title: 'Both Children',
            hint: 'sample mix 14',
            inputPadding: const EdgeInsets.fromLTRB(20, 16, 0, 16),
            boxRadius: 20,
            prefixIcon: IconSpec(
              icon: Icons.arrow_back,
              onTap: () {},
            ),
            leftChildren: const [
              Icon(Icons.reset_tv),
              Icon(Icons.ac_unit),
            ],
            rightChildren: const [
              Icon(Icons.reset_tv),
              Icon(Icons.ac_unit),
            ],
            suffixIcon: IconSpec(
              icon: Icons.arrow_forward,
              onTap: () {},
            ),
          ),
          const SizedBox(height: 20),
          DInputDropdown<String>(
            value: dropdownValue1,
            inputOnChanged: (value) {},
            items: levels.map((e) {
              return DropdownMenuItem(
                value: e,
                child: Text(e),
              );
            }).toList(),
            title: 'Dropdown 1',
          ),
          const SizedBox(height: 20),
          DInputDropdown<String>(
            value: dropdownValue2,
            inputOnChanged: (value) {},
            items: levels.map((e) {
              return DropdownMenuItem(
                value: e,
                child: Text(e),
              );
            }).toList(),
            title: 'Dropdown 2',
            icon: const Icon(Icons.keyboard_arrow_down),
          ),
          const SizedBox(height: 20),
          DInputDropdown<String>(
            value: dropdownValue3,
            inputOnChanged: (value) {
              if (value == null) return;
              dropdownValue3 = value;
            },
            items: levels.map((e) {
              return DropdownMenuItem(
                value: e,
                child: Text(e),
              );
            }).toList(),
            title: 'Dropdown 3',
            inputRadius: 12,
            inputMargin: const EdgeInsets.only(left: 8),
            inputPadding: const EdgeInsets.fromLTRB(16, 8, 8, 8),
            inputBackgroundColor: Colors.amber.withValues(alpha: 0.3),
            icon: const Icon(Icons.keyboard_arrow_down),
            suffixIcon: IconSpec(
              icon: Icons.add_circle,
              onTap: () => print(dropdownValue3),
            ),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}
2
likes
150
points
162
downloads

Publisher

verified publisherindratrisnar.com

Weekly Downloads

Build faster input with default border style

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on d_input