1

I'm not able to add textfield inside positioned widget. Could someone help me with the code

import 'package:flutter/material.dart;
import 'dart:math' as math;import 'dart:math' as math;import 'dart:math' as math;
import 'package:flutter_svg/flutter_svg.dart';

class Android1Widget extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
          // Figma Flutter Generator Android1Widget - FRAME
            return 
              const TextField(

              );
              Container(
      width: 360,
      height: 640,
      decoration: BoxDecoration(
        color : Color.fromRGBO(255, 255, 255, 1),
  ),
      child: Stack(
        children: <Widget>[ 
          Positioned(
        top: 0,
        left: 0,
        child: Container(
        width: 360,
        height: 420,
        decoration: BoxDecoration(
          borderRadius : BorderRadius.only(
            topLeft: Radius.circular(0),
            topRight: Radius.circular(0),
            bottomLeft: Radius.circular(50),
            bottomRight: Radius.circular(50),
          ),
      color : Color.fromRGBO(252, 165, 165, 1),
        )
        )
        const TextField(

        ),
          ),
      Positioned(
        top: 301,
        left: 22,
        child: Container(
        width: 317,
        height: 400,
        decoration: BoxDecoration(
          borderRadius : BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
      boxShadow : [BoxShadow(
          color: Color.fromRGBO(0, 0, 0, 0.25),
          offset: Offset(10,10),
          blurRadius: 4
      )],
      color : Color.fromRGBO(255, 255, 255, 1),
  )   
      )
      ),Positioned(
        top: 427,
        left: 57,
        child:
        Text('Your phone number', textAlign: TextAlign.left, style: TextStyle(
        decoration: TextDecoration.none,
        color: Color.fromRGBO(141, 145, 145, 1),
        fontFamily: 'Roboto',
        fontSize: 16,
        letterSpacing: 0 /*percentages not used in flutter. defaulting to zero*/,
        fontWeight: FontWeight.normal,
        height: 1
      ),)
      ),
      Positioned(
        top: 329,
        left: 60,
        child: Text('Personal Information', textAlign: TextAlign.left, style: TextStyle(
        decoration: TextDecoration.none,  
        shadows: [
        Shadow(
        offset: Offset(6.0, 6.0),
        blurRadius: 4.0,
        color: Color.fromRGBO(0, 0, 0, 0.25),
        ),
        ],
        color: Color.fromRGBO(0, 0, 0, 1),
        fontFamily: 'Roboto',
        fontSize: 25,
        letterSpacing: 0 /*percentages not used in flutter. defaulting to zero*/,
        fontWeight: FontWeight.normal,
        height: 1
      ),)
      ),Positioned(
        top: 348,
        left: 57,
        child: Transform.rotate(
        angle: -0.2012986355707143 * (math.pi / 180),
        child: Divider(
        color: Color.fromRGBO(0, 0, 0, 1),
        thickness: 1
      ),
      )
      ),Positioned(
        top: 569,
        left: 48,
        child: Text('OTP will be sent to your phone number', textAlign: TextAlign.left, style: TextStyle(
        decoration: TextDecoration.none,  
        color: Color.fromRGBO(0, 0, 0, 1),
        fontFamily: 'Roboto',
        fontSize: 16,
        letterSpacing: 0 /*percentages not used in flutter. defaulting to zero*/,
        fontWeight: FontWeight.normal,
        //height: 1
      ),)
      ),Positioned(
        top: 510,
        left: 152,
        child: Container(
      width: 58,
      height: 57,
      decoration: BoxDecoration(
          color : Color.fromRGBO(255, 255, 255, 1),
  ),
      child: Stack(
        children: <Widget>[
          Positioned(
        top: 0,
        left: 0,
        child: Container(
      width: 58,
      height: 57,
      decoration: BoxDecoration(
          color : Color.fromRGBO(255, 255, 255, 1),
  ),
      child: Stack(
        children: <Widget>[
          /*Positioned(
        top: 00,
        left: 0,
        child: Container(
        width: 58,
        height: 57,
        decoration: BoxDecoration(
          color : Color.fromRGBO(253, 171, 159, 1),
      borderRadius : BorderRadius.all(Radius.elliptical(58, 57)),
  )
      )
      ),*/
        ]
      )
    )
      ),
        ]
      )
    )
      ),Positioned(
        top: 379,
        left: 57,
        child: Container(
        width: 40,
        height: 26.666664123535156,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/1200pxflag_of_india1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 391,
        left: 114,
        child: Text('INDIA(+91)', textAlign: TextAlign.left, style: TextStyle(
        decoration: TextDecoration.none,  
        color: Color.fromRGBO(0, 0, 0, 1),
        fontFamily: 'Roboto',
        fontSize: 17,
        letterSpacing: 0 /*percentages not used in flutter. defaulting to zero*/,
        fontWeight: FontWeight.normal,
        height: 1
      ),)
      ),Positioned(
        top: 10,
        left: -10,
        child: Container(
        width: 375,
        height: 291,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Imageedit_9_40029377491.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),
      Positioned(
        top: 612,
        left: 152,
        child: Container(
        width: 62,
        height: 62,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Ellipse 6 (1).png'),
          fit: BoxFit.fitWidth
      ),
      //borderRadius : BorderRadius.all(Radius.elliptical(84, 68)),
  )
        )
      ),
        ]
      )
    );
          }
        }

This is a register page asking for the phone number of the user and sending OTP, but I'm not able to add textfield in this code. Since I have designed my UI in figma and converted using figmaToflutter plugins. I tried to manually add textField but it's showing error

2 Answers2

0

The TextField needs to be added as a child of whatever Positioned widget you want it to be. But you're gonna have trouble going further if you don't know the basics of Flutter. Maybe you could take a beginner course of Udemy? Also there is a single quote missing for the Material package before the semicolon, it should be:

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

You can set the TextField as widget in the stack tree or as a child in a position widget surrounded by Sizedbox that contains width

Mohamad Alzabibi
  • 166
  • 1
  • 14