Description

Masdul widget help in simplifying code for some complicated widget.

Features

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

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: ButtonWidget(
                width: double.infinity,
                onPressed: () {},
                text: "Button",
                radius: 10,
                background: Colors.blue,
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: ButtonWidget(
                width: double.infinity,
                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 PopupWidgetSample extends StatefulWidget {
  const PopupWidgetSample({super.key});

  @override
  State<PopupWidgetSample> createState() => _PopupWidgetSampleState();
}

class SampleData {
  final int id;
  final String name;

  SampleData({required this.id, required this.name});
}

class _PopupWidgetSampleState extends State<PopupWidgetSample> {
  TextEditingController controller = TextEditingController();
  bool isObsecure = true;
  late List<PopupWidgetOptions<SampleData>> options = [];
  List<SampleData> data = [
    SampleData(id: 1, name: "Mother"),
    SampleData(id: 2, name: "Wife"),
    SampleData(id: 3, name: "Children"),
  ];
  List<SampleData> selectedData = [];
  @override
  void initState() {
    options = data
        .map((e) => PopupWidgetOptions(
              text: e.name,
              value: e,
            ))
        .toList();
    // TODO: implement initState
    super.initState();
  }

  @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: () {
                    PopupWidget.alert(
                      context,
                      title: "Important!!",
                      content:
                          "Estimated Appocalipse will come in the future, beware of zombie attack",
                    );
                  },
                  text: "Alert 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: () {
                    PopupWidget.confirm(
                      context,
                      barrierDismisable: false,
                      title: "Important!!",
                      content:
                          "You sure want to remove sell your life to the devil?",
                      okButton: ButtonWidget(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        text: "Yes",
                        radius: 10,
                        background: Colors.blue,
                      ),
                      cancelButton: ButtonWidget(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        text: "No",
                        radius: 10,
                        background: Colors.white,
                        borderColor: Colors.red,
                        textStyle:
                            Theme.of(context).textTheme.bodyLarge!.copyWith(
                                  color: Colors.red,
                                ),
                      ),
                    );
                  },
                  text: "Confirmation Button",
                  radius: 10,
                  background: Colors.white,
                  textStyle: TextStyle(color: Colors.blue),
                  borderColor: Colors.blue,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: Container(
                width: double.infinity,
                child: ButtonWidget(
                  onPressed: () {
                    PopupWidget.chooser<SampleData>(
                      context,
                      color: Colors.orange,
                      title: "Important!!",
                      content:
                          "Choose who will you save if your closest person in danger",
                      barrierDismisable: true,
                      data: options,
                      onSelected: (text, value) {
                        Navigator.of(context).pop();
                      },
                    );
                  },
                  text: "Chooser Button",
                  radius: 10,
                  background: Colors.orange,
                  borderColor: Colors.orange,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: Container(
                width: double.infinity,
                child: ButtonWidget(
                  onPressed: () {
                    PopupWidget.selection<SampleData>(
                      context,
                      color: Colors.indigo,
                      title: "Important!!",
                      content:
                          "Choose who will you save if your closest person in danger",
                      barrierDismisable: true,
                      data: options,
                      selectedData: selectedData,
                      okText: "Choose",
                      onOk: (selected) {
                        Navigator.of(context).pop();
                        selectedData = selected;
                        setState(() {});
                      },
                    );
                  },
                  text:
                      "Selection Button ${selectedData.isNotEmpty ? selectedData.length : ""}",
                  radius: 10,
                  background: Colors.indigo,
                  borderColor: Colors.indigo,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 5),
              child: Container(
                width: double.infinity,
                child: ButtonWidget(
                  onPressed: () {
                    List<PopupWidgetInputModel> form = [
                      PopupWidgetInputModel(
                        controller: TextEditingController(),
                        title: "Name",
                        hint: "Please input Name",
                      ),
                      PopupWidgetInputModel(
                        controller: TextEditingController(),
                        title: "Phone",
                        hint: "Please input Phone number",
                        keyboardType: TextInputType.phone,
                      ),
                    ];
                    PopupWidget.input(
                      context,
                      color: Colors.pink,
                      title: "Input Form",
                      content: "Please input data bellow",
                      barrierDismisable: true,
                      data: form,
                      okText: "Save",
                      onOk: () {
                        Navigator.of(context).pop();
                        setState(() {});
                      },
                    );
                  },
                  text: "Input Button",
                  radius: 10,
                  background: Colors.pink,
                  borderColor: Colors.pink,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Checkbox

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

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

  @override
  State<CheckboxWidgetSample> createState() => _CheckboxWidgetSampleState();
}

class _CheckboxWidgetSampleState extends State<CheckboxWidgetSample> {
  CheckBoxWidgetController<CheckboxDataSampleModel> controller =
      CheckBoxWidgetController();
  late List<CheckboxWidgetModel<CheckboxDataSampleModel>> sampleData = [];
  @override
  void initState() {
    for (var i = 0; i < 5; i++) {
      var faker = Faker();
      var sData = CheckboxDataSampleModel(
        id: faker.guid.random.toString(),
        address: faker.address.city(),
        age: 23,
        name: faker.person.name(),
        salary: faker.randomGenerator.integer(1000000, min: 50000),
      );
      sampleData.add(
        CheckboxWidgetModel<CheckboxDataSampleModel>(
          isDefaultIsChecked: i % 2 != 0,
          isEditable: i % 2 != 0,
          value: sData,
          title: sData.name,
          description: sData.address,
          onTap: (value) {
            // PopupWidget.alert(
            //   context,
            //   title: value.name,
            //   content: value.address,
            // );
          },
        ),
      );
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Sample"),
        actions: [
          TextButton(
            onPressed: () {
              var data = controller.values;
              var stringData = data.map((e) => e.name).join(", ");
              PopupWidget.alert(context, content: stringData);
            },
            child: Text(
              "save",
              style: Theme.of(context)
                  .textTheme
                  .bodyLarge!
                  .copyWith(color: Colors.white),
            ),
          )
        ],
      ),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: CheckboxWidget<CheckboxDataSampleModel>(
          args: CheckboxWidgetArguments(
            controller: controller,
            isCheckButtonLastPlace: false,
            list: sampleData,
          ),
        ),
      ),
    );
  }
}

class CheckboxDataSampleModel {
  final String id;
  final String name;
  final String address;
  final int age;
  final int salary;

  CheckboxDataSampleModel({
    required this.id,
    required this.name,
    required this.address,
    required this.age,
    required this.salary,
  });
}

Radio

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

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

  @override
  State<RadioWidgetSample> createState() => _RadioWidgetSampleState();
}

class _RadioWidgetSampleState extends State<RadioWidgetSample> {
  RadioWidgetController<RadioDataSampleModel> controller =
      RadioWidgetController();
  late List<RadioWidgetModel<RadioDataSampleModel>> sampleData = [];
  @override
  void initState() {
    for (var i = 0; i < 5; i++) {
      var faker = Faker();
      var sData = RadioDataSampleModel(
        id: faker.guid.random.toString(),
        address: faker.address.city(),
        age: 23,
        name: faker.person.name(),
        salary: faker.randomGenerator.integer(1000000, min: 50000),
      );
      sampleData.add(
        RadioWidgetModel<RadioDataSampleModel>(
          isDefaultIsChecked: i % 2 != 0,
          isEditable: i % 2 != 0,
          value: sData,
          title: sData.name,
          description: sData.address,
          onTap: (value) {
            // PopupWidget.alert(
            //   context,
            //   title: value.name,
            //   content: value.address,
            // );
          },
        ),
      );
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Sample"),
        actions: [
          TextButton(
            onPressed: () {
              var data = controller.value;
              if (data != null) PopupWidget.alert(context, content: data.name);
            },
            child: Text(
              "save",
              style: Theme.of(context)
                  .textTheme
                  .bodyLarge!
                  .copyWith(color: Colors.white),
            ),
          )
        ],
      ),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: RadioWidget<RadioDataSampleModel>(
          args: RadioWidgetArguments(
            controller: controller,
            isRadioButtonLastPlace: false,
            list: sampleData,
          ),
        ),
      ),
    );
  }
}

class RadioDataSampleModel {
  final String id;
  final String name;
  final String address;
  final int age;
  final int salary;

  RadioDataSampleModel({
    required this.id,
    required this.name,
    required this.address,
    required this.age,
    required this.salary,
  });
}

Usage

import 'package:masdul_widget/masdul_widget.dart';