Create responsive layout of form

android/local.properties

@@ -1,2 +1,2 @@
-sdk.dir=/Users/yashmakan/Library/Android/sdk
-flutter.sdk=/Users/yashmakan/Downloads/flutter
+sdk.dir=C:\\Users\\HP\\AppData\\Local\\Android\\sdk
+flutter.sdk=C:\\flutter

example/lib/main.dart

@@ -19,62 +19,78 @@ class MyApp extends StatelessWidget {
       ),
       home: FlutterForm(
           form: FlutterFormData(
-            name: "Survey Form",
-            themeColor: Colors.redAccent,
-            showLogo: false,
-            pages: [
-              FlutterFormPage(
-                heading: "Basic Information",
-                imageLayout: ImageLayout.leftExpanded,
-                image: "https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
-                description: "Please provide some basic details.",
-                answerType: AnswerType.shortText,
+        name: "Survey Form",
+        themeColor: Colors.redAccent,
+        showLogo: false,
+        pages: [
+          FlutterFormPage(
+            heading: "Basic Information",
+            imageLayout: ImageLayout.leftExpanded,
+            image:
+                "https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
+            description: "Please provide some basic details.",
+            answerType: AnswerType.shortText,
+          ),
+          FlutterFormPage(
+            heading: "Favorite Color",
+            description: "What's your favorite color?",
+            imageLayout: ImageLayout.rightExpanded,
+            image:
+                "https://images.unsplash.com/photo-1533109721025-d1ae7ee7c1e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
+            answerType: AnswerType.singleChoice,
+            options: [
+              ChoiceOption(
+                label: "Red",
+                value: "red",
+                image: "https://picsum.photos/300/200",
               ),
-              FlutterFormPage(
-                  heading: "Favorite Color",
-                  description: "What's your favorite color?",
-                  imageLayout: ImageLayout.rightExpanded,
-                  image: "https://images.unsplash.com/photo-1533109721025-d1ae7ee7c1e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
-                  answerType: AnswerType.multipleChoice,
-                  options: ["Red", "Blue", "Green"]
+              ChoiceOption(
+                label: "Green",
+                value: "green",
               ),
-              FlutterFormPage(
-                heading: "Contact Information",
-                description: "Let us know how to reach you.",
-                answerType: AnswerType.contactInfo,
-              ),
-              FlutterFormPage(
-                heading: "Address",
-                description: "Please provide your address.",
-                answerType: AnswerType.address,
-              ),
-              FlutterFormPage(
-                heading: "Phone Number",
-                description: "What's your phone number?",
-                answerType: AnswerType.phoneNumber,
-              ),
-              FlutterFormPage(
-                heading: "Feedback",
-                description: "Share your thoughts with us.",
-                answerType: AnswerType.longText,
-              ),
-              FlutterFormPage(
-                heading: "Satisfaction",
-                description: "Are you satisfied with our service?",
-                answerType: AnswerType.yesNo,
+              ChoiceOption(
+                label: "Yellow",
+                value: "yellow",
               ),
             ],
-            onFormSubmitted: (pages) {
-              for (var element in pages) {
-                debugPrint(element.toJson().toString());
-                debugPrint("text: ${element.controller.text}");
-                debugPrint("selected options: ${element.selectedOptions}");
-                debugPrint("form: ${element.formField}");
-                debugPrint("---");
-              }
-            },
-            onPageEdited: (page) {},
-          )),
+          ),
+          FlutterFormPage(
+            heading: "Contact Information",
+            description: "Let us know how to reach you.",
+            answerType: AnswerType.contactInfo,
+          ),
+          FlutterFormPage(
+            heading: "Address",
+            description: "Please provide your address.",
+            answerType: AnswerType.address,
+          ),
+          FlutterFormPage(
+            heading: "Phone Number",
+            description: "What's your phone number?",
+            answerType: AnswerType.phoneNumber,
+          ),
+          FlutterFormPage(
+            heading: "Feedback",
+            description: "Share your thoughts with us.",
+            answerType: AnswerType.longText,
+          ),
+          FlutterFormPage(
+            heading: "Satisfaction",
+            description: "Are you satisfied with our service?",
+            answerType: AnswerType.yesNo,
+          ),
+        ],
+        onFormSubmitted: (pages) {
+          for (var element in pages) {
+            debugPrint(element.toJson().toString());
+            debugPrint("text: ${element.controller.text}");
+            debugPrint("selected options: ${element.selectedOptions}");
+            debugPrint("form: ${element.formField}");
+            debugPrint("---");
+          }
+        },
+        onPageEdited: (page) {},
+      )),
     );
   }
 }

example/pubspec.lock

@@ -37,10 +37,10 @@ packages:
     dependency: transitive
     description:
       name: collection
-      sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c"
+      sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.1"
+    version: "1.18.0"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -68,7 +68,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.1"
+    version: "0.0.3"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -82,14 +82,6 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
-  js:
-    dependency: transitive
-    description:
-      name: js
-      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.6.7"
   lints:
     dependency: transitive
     description:
@@ -102,26 +94,26 @@ packages:
     dependency: transitive
     description:
       name: matcher
-      sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb"
+      sha256: "1803e76e6653768d64ed8ff2e1e67bea3ad4b923eb5c56a295c3e634bad5960e"
       url: "https://pub.dev"
     source: hosted
-    version: "0.12.15"
+    version: "0.12.16"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
+      sha256: "9528f2f296073ff54cb9fee677df673ace1218163c3bc7628093e7eed5203d41"
       url: "https://pub.dev"
     source: hosted
-    version: "0.2.0"
+    version: "0.5.0"
   meta:
     dependency: transitive
     description:
       name: meta
-      sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
+      sha256: a6e590c838b18133bb482a2745ad77c5bb7715fb0451209e1a7567d416678b8e
       url: "https://pub.dev"
     source: hosted
-    version: "1.9.1"
+    version: "1.10.0"
   path:
     dependency: transitive
     description:
@@ -147,26 +139,26 @@ packages:
     dependency: transitive
     description:
       name: source_span
-      sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250
+      sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c"
       url: "https://pub.dev"
     source: hosted
-    version: "1.9.1"
+    version: "1.10.0"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
-      sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
+      sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b"
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "1.11.1"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
-      sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
+      sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.1"
+    version: "2.1.2"
   string_scanner:
     dependency: transitive
     description:
@@ -187,10 +179,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb
+      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.1"
+    version: "0.6.1"
   vector_math:
     dependency: transitive
     description:
@@ -199,6 +191,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.4"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: afe077240a270dcfd2aafe77602b4113645af95d0ad31128cc02bce5ac5d5152
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.0"
 sdks:
-  dart: ">=3.0.6 <4.0.0"
+  dart: ">=3.2.0-194.0.dev <4.0.0"
   flutter: ">=1.17.0"

lib/flutter_form_kit.dart

@@ -2,4 +2,5 @@ library flutterform;
 export 'src/constants/enums.dart';
 export 'src/models/form.dart';
 export 'src/models/page.dart';
+export 'src/models/choice_option.dart';
 export 'src/views/form.dart';

lib/src/constants/enums.dart

@@ -1,6 +1,7 @@
 enum AnswerType {
   shortText,
   multipleChoice,
+  singleChoice,
   contactInfo,
   address,
   phoneNumber,

lib/src/models/choice_option.dart

@@ -0,0 +1,11 @@
+class ChoiceOption {
+  final String label;
+  final String value;
+  final String? image;
+
+  ChoiceOption({
+    required this.label,
+    required this.value,
+    this.image,
+  });
+}

lib/src/models/form.dart

@@ -7,6 +7,8 @@ class FlutterFormData {
   final Color? themeColor;
   final String? logo;
   final bool showLogo;
+  final Color backgroundColor;
+  final Duration pageTransitionDuration;
   List<FlutterFormPage> pages;
   final Function(FlutterFormPage page) onPageEdited;
   final Function(List<FlutterFormPage> pages) onFormSubmitted;
@@ -16,6 +18,8 @@ class FlutterFormData {
       required this.pages,
       this.themeColor,
       this.logo,
+      this.backgroundColor = Colors.white,
+      this.pageTransitionDuration = const Duration(seconds: 2),
       this.showLogo = true,
       required this.onPageEdited,
       required this.onFormSubmitted});

lib/src/models/page.dart

@@ -1,15 +1,23 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_form_kit/src/constants/enums.dart';
+import 'package:flutter_form_kit/src/models/choice_option.dart';
 
 class FlutterFormPage {
   final String heading;
   final String? description;
   final String? image;
   final AnswerType answerType;
   final ImageLayout? imageLayout;
-  List<String>? options;
+  /// The options for the form page.
+  /// Example:
+  /// {
+  ///   "label": "Red",
+  ///   "value": "red",
+  ///   "image": "https://images.unsplash.com/photo-15795469" // Optional
+  /// }
+  List<ChoiceOption>? options;
   TextEditingController controller = TextEditingController();
-  List<String> selectedOptions = [];
+  List<ChoiceOption> selectedOptions = [];
   List<String> formField = [];
 
   FlutterFormPage({

lib/src/views/form.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_form_kit/src/models/choice_option.dart';
 import 'package:flutter_form_kit/src/models/form.dart';
 import 'package:flutter_form_kit/src/widgets/custom_button.dart';
 import 'package:flutter_form_kit/src/widgets/flutter_form_details.dart';
@@ -45,7 +46,7 @@ class _FlutterFormState extends State<FlutterForm> {
                       cursorPosition;
                 } else if (value.runtimeType == List) {
                   widget.form.pages[currentIndex].selectedOptions =
-                      List<String>.from(value);
+                      List<ChoiceOption>.from(value);
                 }
                 currentIndex = index;
                 setState(() {});
@@ -66,7 +67,7 @@ class _FlutterFormState extends State<FlutterForm> {
                       }
                     },
                     child: Scaffold(
-                      backgroundColor: Colors.white,
+                      backgroundColor: widget.form.backgroundColor,
                       floatingActionButton: Row(
                         mainAxisSize: MainAxisSize.min,
                         children: [
@@ -76,10 +77,11 @@ class _FlutterFormState extends State<FlutterForm> {
                               pagesLength: widget.form.pages.length,
                               onPageChanged: (index) =>
                                   setState(() => currentIndex = index)),
-                          if(widget.form.showLogo)...[
+                          if (widget.form.showLogo) ...[
                             const SizedBox(width: 12),
                             CustomButton(
-                              text: widget.form.logo ?? "Powered by FlutterForm",
+                              text:
+                                  widget.form.logo ?? "Powered by FlutterForm",
                               onTap: () {},
                               themeColor: widget.form.themeColor ??
                                   const Color(0xFF0445af),
@@ -106,7 +108,8 @@ class _FlutterFormState extends State<FlutterForm> {
 
   onNextPage() {
     controller.animateToPage(currentIndex + 1,
-        duration: const Duration(seconds: 2), curve: Curves.fastOutSlowIn);
+        duration: widget.form.pageTransitionDuration,
+        curve: Curves.fastOutSlowIn);
     widget.form.onPageEdited(widget.form.pages[currentIndex]);
   }
 }