John Reaper
John Reaper

Reputation: 307

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

A design like I want:

enter image description here

This is the current design:

enter image description here

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(),
                                  ),
                                ),
                              )),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

Upvotes: 0

Views: 195

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63549

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: () {}),
    );
  }
}

enter image description here

Play with Positioned and Alignment

Upvotes: 1

Related Questions