Handle widget position dynamically on Image in flutter

Question

Hi, My client wants to add different types of widgets on a different type of from. So the issue is that there is an API that gives me the background image just the Image I share. So on that background image, the API returns the height, width and position of the Widget where that widget should show on the screen. For example, there is the name and after that name, there should be a text field added dynamically in front of the name given space using the position provided by API but I don't know how to do that and I also don't understand which type of values I need from APIs to handle this. And also that should be responsive according to the different screen sizes. Please guide ma which type of data should I be required to achieve this. I create the dummy data.

    FormModel formLis = FormModel(
  formImage: 'assets/images/form.png',
  message: null,
  status: true,
  formData: [
    FormData(
      type: "text",
      width: 190,
      height: 22.058823529412,
      top: 0.115,
      left: .23,
    ),
 FormData(
      type: "dropdown",
      width: 190,
      height: 22.058823529412,
      top: 0.115,
      left: .23,
    ),
   
  ],
);

My code

class TestHtml extends StatefulWidget {
  const TestHtml({Key? key}) : super(key: key);

  @override
  State<TestHtml> createState() => _TestHtmlState();
}

class _TestHtmlState extends State<TestHtml> {
  @override
  void initState() {
    get();
    super.initState();
  }

  TextEditingController tfNaam = TextEditingController();

  Size? imageSize;

  get() async {
    final buffer =
        await rootBundle.load('assets/images/form.png'); // get the byte buffer
    final memoryImageSize =
        ImageSizeGetter.getSize(MemoryInput.byteBuffer(buffer.buffer));
    imageSize = memoryImageSize;
    setState(() {});
    // print('memoryImageSize = ${memoryImageSize}');
  }

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: imageSize == null
          ? SizedBox.shrink()
          : SingleChildScrollView(
              child: Container(
                height: MediaQuery.of(context).size.height,
                child: new Stack(
                  children: <Widget>[
                    new Positioned.fill(
                      child: FormBackground(
                        imagePath: formLis.formImage,
                      ),
                    ),
                    for (var i = 0; i < formLis.formData!.length; i++)
                      Positioned(
                        top: imageSize!.height * 0.05,
                        left: imageSize!.width * 0.033,
                        child: Container(
                          width: 98,
                          child: Container(
                            height: 11,
                            child: Center(
                              child: TextField(
                                textAlignVertical: TextAlignVertical.center,
                                style: TextStyle(
                                    fontSize: 9,
                                    height: 1.25,
                                    fontWeight: FontWeight.w500),
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.only(left: 5),
                                  focusedBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                          color: AppColors.themeColor),
                                      borderRadius: BorderRadius.zero),
                                  border: OutlineInputBorder(
                                      borderSide: BorderSide(
                                          color: AppColors.borderGrey),
                                      borderRadius: BorderRadius.zero),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
    );
  }
}

In my code, you see that in Positioned Widget top and left I use static values but I want them to dynamic and show exact same given position using values coming from APIs.

Answer 1

Form

form can have totalWidth and totalHeight. and a list of content now Let's call every part/content of form a Component.

Components

each component should at least have these:

Location

each Component first needs 4 property for its location. 2 of them are for widget position. let's call them left and top. these two shows were the widget position is on screen. and other 2 is for widget height and width.

Type

you need a property define each component type like text, image, checkBox or ...

Requirement

if this component is required.

Contents

base on what type the component is, it should have necessary content to build widget. for example if it's type of text, needs title and ...

now you can build the Form with Stack and Positioned widget.