I am just starting to code by myself in Flutter. I've built this so far and here is the image. Can you show me what would be better or cleaner code? I used Row widget for it, but I guess I should maybe go with the Stack. Because now I want to add a text field box in the middle of the app bar that overflows in the down direction.
child: Stack(
children: <Widget>[
Scaffold(
backgroundColor: Color.fromRGBO(255, 202, 6, 1),
appBar: PreferredSize(
preferredSize: Size.fromHeight(90.0),
child: Padding(
padding: const EdgeInsets.only(left: 20, top: 20, bottom: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(backgroundImage: NetworkImage(
"https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_thumb,g_face,r_max/face_left.png"),
radius: 32,
backgroundColor: Colors.white,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
),
),
Padding(
padding: const EdgeInsets.only(left: 13, top: 8),
child: Text(
'Someones Name',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(left: 100, bottom: 30),
child: Switch(
inactiveThumbColor: Colors.white,
activeColor: Colors.grey[700],
value: false,
onChanged: (bool state) {
print(state);
},
),
),
],
),
),
),
body: Container(
height: 800,
width: 500,
decoration: BoxDecoration(
color: Color.fromRGBO(251, 251, 251, 1),
borderRadius: BorderRadius.vertical(
top: Radius.circular(15),
),
),
),
),
],
overflow: Overflow.visible,
),
);
And this is look I want to achieve:
