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.
jsonfile?