masdul_widget 0.1.3

Masdul widget help in simplifying code for some complicated widget.

Description

Masdul widget help in simplifying code for some complicated widget.

Features

• Circle Image
• Stacked Image
• Rounded Image
• Text Field
• Chat Bubble
• Button
• Popup

Circle image

import 'package:faker/faker.dart';
import 'package:flutter/material.dart';
import 'package:masdul_widget/circle_image.dart';

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

  @override
  State<CircleImageSample> createState() => _CircleImageSampleState();
}

class _CircleImageSampleState extends State<CircleImageSample> {
  var faker = Faker();
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Circle Image"),
      ),
      body: Center(
        child: CircleImage(
          image: Image.network(faker.image.image()),
          size: 50,
        ),
      ),
    );
  }
}

Stacked Image

import 'package:faker/faker.dart';
import 'package:flutter/material.dart';
import 'package:masdul_widget/stacked_image.dart';

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

  @override
  State<StackedImageSample> createState() => _StackedImageSampleState();
}

class _StackedImageSampleState extends State<StackedImageSample> {
  var faker = Faker();
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Stacked Image"),
      ),
      body: Center(
        child: StackedImage(
          firstInFront: true,
          images: [
            Image.network(faker.image.image()),
            Image.network(faker.image.image()),
            Image.network(faker.image.image()),
          ],
          space: 50,
          imageSize: 100,
          radius: 50,
        ),
      ),
    );
  }
}

Rounded Image

import 'package:faker/faker.dart';
import 'package:flutter/material.dart';
import 'package:masdul_widget/rounded_image.dart';

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

  @override
  State<RoundedImageSample> createState() => _RoundedImageSampleState();
}

class _RoundedImageSampleState extends State<RoundedImageSample> {
  var faker = Faker();
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Rounded Image"),
      ),
      body: Center(
        child: RoundedImage(
          image: Image.network(faker.image.image()),
          size: 50,
          radius: 10,
        ),
      ),
    );
  }
}

text field

import 'package:flutter/material.dart';
import 'package:masdul_widget/textfield_widget.dart';

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

  @override
  State<TextFieldSample> createState() => _TextFieldSampleState();
}

class _TextFieldSampleState extends State<TextFieldSample> {
  TextEditingController controller = TextEditingController();
  bool isObsecure = true;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Text Field"),
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: TextFieldWidget(
            controller: controller,
            hint: "Type here...",
            prefix: const Icon(Icons.key),
            suffix: InkWell(
              onTap: () {
                isObsecure = !isObsecure;
                setState(() {});
              },
              child: const Icon(Icons.visibility),
            ),
            obscureText: isObsecure,
          ),
        ),
      ),
    );
  }
}

Chat Bubble

import 'package:flutter/material.dart';
import 'package:masdul_widget/bubble_chat.dart';

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

  @override
  State<BubbleChatSample> createState() => _BubbleChatSampleState();
}

class _BubbleChatSampleState extends State<BubbleChatSample> {
  TextEditingController controller = TextEditingController();
  bool isObsecure = true;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Bubble Chat"),
      ),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: BubbleChat(
                from: Text(
                  "Jhon Doe",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                width: 270,
                direction: BubbleChatDirection.left,
                cevron: BubbleChatCevron.left,
                color: Colors.greenAccent,
                child: const Text("hello"),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: BubbleChat(
                width: 270,
                color: Colors.greenAccent,
                child: const Text("how are you?"),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: BubbleChat(
                width: 270,
                direction: BubbleChatDirection.right,
                cevron: BubbleChatCevron.right,
                color: Colors.grey,
                from: Text(
                  "Jhen Doo",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                repliedChild: Text("how are you?"),
                child: const Text("oh hai, i'm fine thank you"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Button

import 'package:flutter/material.dart';
import 'package:masdul_widget/button_widget.dart';

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

  @override
  State<ButtonWidgetSample> createState() => _ButtonWidgetSampleState();
}

class _ButtonWidgetSampleState extends State<ButtonWidgetSample> {
  TextEditingController controller = TextEditingController();
  bool isObsecure = true;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Button Sample"),
      ),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: Container(
                width: double.infinity,
                child: ButtonWidget(
                  onPressed: () {},
                  text: "Button",
                  radius: 10,
                  background: Colors.blue,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: Container(
                width: double.infinity,
                child: ButtonWidget(
                  onPressed: () {},
                  text: "Button",
                  radius: 10,
                  background: Colors.white,
                  textStyle: TextStyle(color: Colors.blue),
                  borderColor: Colors.blue,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Popup

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

class PopupWidgetOptions<T> {
  final String text;
  final T? value;
  PopupWidgetOptions({required this.text, required this.value});
}

class PopupWidgetInputModel {
  final String title;
  final String? hint;
  final TextEditingController controller;
  final TextInputType keyboardType;
  final bool enable;

  PopupWidgetInputModel(
      {required this.title,
      this.hint,
      required this.controller,
      this.keyboardType = TextInputType.text,
      this.enable = true});
}

class PopupWidget {
  static Future<T?> alert<T>(
    BuildContext context, {
    String title = "Alert",
    String content = "",
  }) async {
    var size = MediaQuery.of(context).size;
    var dialog = Dialog(
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: Container(
        width: size.width - 40,
        constraints: BoxConstraints(
          maxHeight: size.height - 80,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
        ),
        child: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 10),
                Text(
                  title,
                  style: Theme.of(context).textTheme.bodyText1!.copyWith(
                        fontWeight: FontWeight.bold,
                      ),
                ),
                const Divider(),
                Text(content),
                const SizedBox(height: 10),
              ],
            ),
          ),
        ),
      ),
    );
    return showDialog(
        context: context,
        barrierDismissible: true,
        builder: (context) {
          return dialog;
        });
  }

  static Future<T?> confirm<T>(
    BuildContext context, {
    String title = "Confirmation",
    String content = "",
    required ButtonWidget okButton,
    ButtonWidget? cancleButton,
    bool barrierDismisable = true,
  }) async {
    var size = MediaQuery.of(context).size;
    var dialog = Dialog(
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: Container(
        width: size.width - 40,
        constraints: BoxConstraints(
          maxHeight: size.height - 80,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
        ),
        child: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 10),
                Text(
                  title,
                  style: Theme.of(context).textTheme.bodyText1!.copyWith(
                        fontWeight: FontWeight.bold,
                      ),
                ),
                const Divider(),
                Text(content),
                const Divider(),
                Container(
                  alignment: Alignment.centerRight,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      okButton,
                      if (cancleButton != null) const SizedBox(width: 5),
                      if (cancleButton != null) cancleButton,
                    ],
                  ),
                ),
                const SizedBox(height: 10),
              ],
            ),
          ),
        ),
      ),
    );
    return showDialog(
        context: context,
        barrierDismissible: barrierDismisable,
        builder: (context) {
          return dialog;
        });
  }

  static Future<T?> chooser<T>(
    BuildContext context, {
    String title = "Choose",
    String? content,
    bool barrierDismisable = true,
    required List<PopupWidgetOptions<T>> data,
    required Function(String text, T? value) onSelected,
    Color color = Colors.blue,
  }) async {
    var size = MediaQuery.of(context).size;
    var dialog = Dialog(
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: Container(
        width: size.width - 40,
        constraints: BoxConstraints(
          maxHeight: size.height - 80,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
        ),
        child: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 10),
                Text(
                  title,
                  style: Theme.of(context).textTheme.bodyText1!.copyWith(
                        fontWeight: FontWeight.bold,
                      ),
                ),
                if (content != null) const Divider(),
                if (content != null) Text(content),
                const Divider(),
                ...data.map((e) {
                  return Container(
                    width: double.infinity,
                    child: ButtonWidget(
                      onPressed: () {
                        onSelected(e.text, e.value);
                      },
                      text: e.text,
                      background: Colors.white,
                      radius: 10,
                      textStyle: Theme.of(context)
                          .textTheme
                          .bodyText1!
                          .copyWith(color: color),
                      borderColor: color,
                    ),
                  );
                }).toList(),
                const SizedBox(height: 10),
              ],
            ),
          ),
        ),
      ),
    );
    return showDialog(
        context: context,
        barrierDismissible: barrierDismisable,
        builder: (context) {
          return dialog;
        });
  }

  static Future<T?> selection<T>(
    BuildContext context, {
    String title = "Confirmation",
    String? content,
    bool barrierDismisable = true,
    required List<PopupWidgetOptions<T>> data,
    required List<T> selectedData,
    required Function(List<T> selectedData) onOk,
    String okText = "Confirm",
    Color color = Colors.blue,
  }) async {
    var size = MediaQuery.of(context).size;
    List<T> selected = selectedData;
    var dialog = Dialog(
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: StatefulBuilder(builder: (context, setState) {
        return Container(
          width: size.width - 40,
          constraints: BoxConstraints(
            maxHeight: size.height - 80,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.white,
          ),
          child: SingleChildScrollView(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 10),
                  Text(
                    title,
                    style: Theme.of(context).textTheme.bodyText1!.copyWith(
                          fontWeight: FontWeight.bold,
                        ),
                  ),
                  if (content != null) const Divider(),
                  if (content != null) Text(content),
                  const Divider(),
                  ...data.map((e) {
                    bool isSelected = selected.contains(e.value);
                    return Container(
                      width: double.infinity,
                      child: ButtonWidget(
                        onPressed: () {
                          if (!isSelected) {
                            if (e.value != null) selected.add(e.value as T);
                          } else {
                            selected.remove(e.value);
                          }
                          setState(() {});
                        },
                        text: e.text,
                        background:
                            isSelected ? color.withOpacity(0.2) : Colors.white,
                        radius: 10,
                        textStyle: Theme.of(context)
                            .textTheme
                            .bodyText1!
                            .copyWith(color: color),
                        borderColor: color,
                      ),
                    );
                  }).toList(),
                  const Divider(),
                  SizedBox(
                    width: double.infinity,
                    child: ButtonWidget(
                      onPressed: () {
                        onOk(selected);
                      },
                      text: okText,
                      borderColor: color,
                      background: color,
                    ),
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
          ),
        );
      }),
    );
    return showDialog(
        context: context,
        barrierDismissible: barrierDismisable,
        builder: (context) {
          return dialog;
        });
  }

  static Future<T?> input<T>(
    BuildContext context, {
    String title = "Input Form",
    String? content,
    bool barrierDismisable = true,
    required List<PopupWidgetInputModel> data,
    required Function() onOk,
    String okText = "Confirm",
    Color color = Colors.blue,
    Function({PopupWidgetInputModel inputForm})? onTapInput,
  }) async {
    var size = MediaQuery.of(context).size;
    var dialog = Dialog(
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: StatefulBuilder(builder: (context, setState) {
        return Container(
          width: size.width - 40,
          constraints: BoxConstraints(
            maxHeight: size.height - 80,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.white,
          ),
          child: SingleChildScrollView(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 10),
                  Text(
                    title,
                    style: Theme.of(context).textTheme.bodyText1!.copyWith(
                          fontWeight: FontWeight.bold,
                        ),
                  ),
                  if (content != null) const Divider(),
                  if (content != null) Text(content),
                  const Divider(),
                  ...data.map((e) {
                    return Container(
                      width: double.infinity,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            e.title,
                            style:
                                Theme.of(context).textTheme.bodyText1!.copyWith(
                                      fontWeight: FontWeight.bold,
                                    ),
                          ),
                          const SizedBox(height: 5),
                          TextFieldWidget(
                            controller: e.controller,
                            enabled: e.enable,
                            hint: e.hint,
                            keyboardType: e.keyboardType,
                            onTap: () {
                              if (onTapInput != null) onTapInput(inputForm: e);
                            },
                          ),
                          const SizedBox(height: 10),
                        ],
                      ),
                    );
                  }).toList(),
                  const Divider(),
                  SizedBox(
                    width: double.infinity,
                    child: ButtonWidget(
                      onPressed: () {
                        onOk();
                      },
                      text: okText,
                      borderColor: color,
                      background: color,
                    ),
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
          ),
        );
      }),
    );
    return showDialog(
        context: context,
        barrierDismissible: barrierDismisable,
        builder: (context) {
          return dialog;
        });
  }
}

Usage

import 'package:masdul_widget/circle_image.dart';
import 'package:masdul_widget/stacked_image.dart';
import 'package:masdul_widget/rounded_image.dart';
import 'package:masdul_widget/textfield_widget.dart';
import 'package:masdul_widget/bubble_chat.dart';
import 'package:masdul_widget/button_widget.dart';
import 'package:masdul_widget/popup_widget.dart';