How to change the button position and make the design button flutter? - flutter

Question

A design like I want:
This is the current design:
Hello. How to change the position of the button and make the button design like the picture I show. I have tried to make it myself but still failed to get the design as in the picture I showed. I am new to flutter. Please guide me and hope someone is willing to help me.
This is my current code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 35),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Center(
child: FutureBuilder(
future:
_getSignedURL(widget.patientProfile.avatar),
builder: (BuildContext context,
AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
color: Colors.white,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color:
Color.fromRGBO(255, 255, 255, 0.3),
border: Border.all(
color: Colors.black12,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(200.0)),
),
),
);
} else {
return CircleAvatar(
radius: 100,
backgroundImage:
NetworkImage(snapshot.data),
);
}
},
),
),
),
],
),
),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Align(
alignment: Alignment.centerRight,
child: ButtonTheme(
minWidth: 100.0,
height: 38.0,
buttonColor: mainColor,
// ignore: deprecated_member_use
child: RaisedButton(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
textColor: Colors.white,
color: mainColor,
child: Text('Save'),
onPressed: () => _updatePatientProfile(),
),
),
)),
),
],
),
),
],
),
),

Answer 1

Play with Stack widget, there are others way of doing this.
class B extends StatefulWidget {
B({Key? key}) : super(key: key);
#override
State<B> createState() => _BState();
}
class _BState extends State<B> {
Color mainColor = Colors.blue;
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Column(
children: [
Column(
children: [
Container(
color: Colors.cyanAccent,
height: 200 + 70 + 60, // based on circle+ text space
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
// divider
Align(
alignment: Alignment(0, -.35),
child: Container(
width: constraints.maxWidth,
height: 8,
color: mainColor,
)),
Positioned(
top: 40,
left: 100,
child: Column(
children: [
CircleAvatar(
radius: 100,
),
SizedBox(
height: 70,
),
Text(
"Dumasd Text A",
textAlign: TextAlign.center,
),
],
),
),
Align(
alignment: Alignment(.7, .25),
child: saveProfile(),
)
],
),
),
],
),
],
),
),
);
}
ButtonTheme saveProfile() {
return ButtonTheme(
minWidth: 100.0,
height: 38.0,
buttonColor: mainColor,
// ignore: deprecated_member_use
child: RaisedButton(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
textColor: Colors.white,
color: mainColor,
child: Text('Save'),
onPressed: () {}),
);
}
}
Play with Positioned and Alignment