Buat tombol bulat / tombol dengan jari-jari perbatasan di Flutter

172

Saat ini saya sedang mengembangkan aplikasi Android di Flutter. Bagaimana saya bisa menambahkan tombol bulat?

flutter dart Komik Kingsley Kbc
sumber

1

Anda dapat menggunakan RaisedButtonatauInkWell

Blasanka

Ini di sini telah menyebutkan banyak cara mightytechno.com/rounded-button-flutter

Ishan Fernando

300

1. Ringkasan Solusi

Anda dapat menggunakan shapeuntuk FlatButtondan RaisedButton.

2. Tombol Bulat

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(18.0),
  side: BorderSide(color: Colors.red)
),

Tombol persegi

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(0.0),
  side: BorderSide(color: Colors.red)
),

Contoh Lengkap

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    FlatButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)),
      color: Colors.white,
      textColor: Colors.red,
      padding: EdgeInsets.all(8.0),
      onPressed: () {},
      child: Text(
        "Add to Cart".toUpperCase(),
        style: TextStyle(
          fontSize: 14.0,
        ),
      ),
    ),
    SizedBox(width: 10),
    RaisedButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)),
      onPressed: () {},
      color: Colors.red,
      textColor: Colors.white,
      child: Text("Buy now".toUpperCase(),
        style: TextStyle(fontSize: 14)),
    ),
  ],   
)

Abror Esonaliyev
sumber

1

Hai Abror, ini sangat membantu saya. Terima kasih banyak!

jkoech

198

Anda dapat menggunakan Widget RaisedButton. Raised Button Widget memiliki properti bentuk yang dapat Anda manfaatkan seperti yang ditunjukkan pada cuplikan di bawah ini.

 RaisedButton(
          child: Text("Press Me"),
          onPressed: null,
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
        )

dhuma1981
sumber

37

Ada banyak cara untuk melakukannya. Saya daftar beberapa di sini.

(1) Menggunakan RoundedRectangleBorder

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  onPressed: () {},
  child: Text("Button"),
)

(2) Menggunakan ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(3) Menggunakan ClipOval

ClipOval(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(4) Menggunakan ButtonTheme

ButtonTheme(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(5) Menggunakan StadiumBorder

RaisedButton(
  shape: StadiumBorder(),
  onPressed: () {},
  child: Text("Button"),
)

CopsOnRoad
sumber

31

Anda cukup menggunakan RaisedButton

Padding(
  padding: EdgeInsets.only(left: 150.0, right: 0.0),
  child: RaisedButton(
    textColor: Colors.white,
    color: Colors.black,
    child: Text("Search"),
    onPressed: () {},
    shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),
  ),
)

Keluaran:

Info lebih lanjut: RSCoder

Rahul Shukla
sumber

1

Terima kasih! Saya mencari jawaban yang Anda sebutkan.

Pramesh Bhalala

28

Anda cukup menggunakan RaisedButtonatau bisa digunakan InkWelluntuk mendapatkan tombol kustom dan juga properti seperti onDoubleTap, onLongPressdan etc.:

new InkWell(
  onTap: () => print('hello'),
  child: new Container(
    //width: 100.0,
    height: 50.0,
    decoration: new BoxDecoration(
      color: Colors.blueAccent,
      border: new Border.all(color: Colors.white, width: 2.0),
      borderRadius: new BorderRadius.circular(10.0),
    ),
    child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
  ),
),

Jika Anda ingin menggunakan splashColor, highlightColorproperti di InkWellwidget, menggunakan Materialwidget sebagai induk dari InkWellwidget bukan menghias wadah (menghapus properti dekorasi). Baca mengapa? di sini .

Blasanka
sumber

4

Jika Anda ingin InkWellklip ke sudut dibulatkan maka Anda perlu untuk menambahkan borderRadius: BorderRadius.circular(10.0)ke InkWellwidget juga selain itu akan pergi ke tepi persegi panjang melompat-lompat.

Victor Rendina

@ Viktorendendina Saya sedang mencari cara untuk membuat riak bulat, terima kasih atas komentar Anda. tambahkan ini sebagai jawaban untuk pertanyaan inkwell karena banyak yang tidak menyebutkan ini.

sudesh

5

Anda dapat menggunakan kode di bawah ini untuk membuat tombol bulat dengan warna gradien.

 Container(
          width: 130.0,
          height: 43.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            gradient: LinearGradient(
              // Where the linear gradient begins and ends
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [0.1, 0.9],
              colors: [
                // Colors are easy thanks to Flutter's Colors class.
                Color(0xff1d83ab),
                Color(0xff0cbab8),
              ],
            ),
          ),
          child: FlatButton(
            child: Text(
              'Sign In',
              style: TextStyle(
                fontSize: 16.0,
                fontFamily: 'Righteous',
                fontWeight: FontWeight.w600,
              ),
            ),
            textColor: Colors.white,
            color: Colors.transparent,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            onPressed: () {

            },
          ),
        );

Tahseen Quraishi
sumber

3

Anda mungkin harus membiasakan diri dengan halaman dokumen ini secara khusus: sudut pembulatan .

Dokumen menunjukkan kepada Anda bagaimana mengubah gaya komponen dan gaya yang setara dalam css, jika Anda sudah terbiasa dengan itu.

Bidang Devin
sumber

3

Anda dapat menggunakan kode ini untuk tombol bulat transparan dengan melewatkan warna transparan ke properti warna di dalamnya BoxDecoration. misalnya. color: Colors.transparent. Juga, perhatikan bahwa tombol ini hanya menggunakan widget Containerdan GestureDetectorwidget.

Container(
    height: 50.0,
    child: GestureDetector(
        onTap: () {},
        child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Center(
                        child: Text(
                           "BUTTON",
                            style: TextStyle(
                                color: Color(0xFFF05A22),
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

mjhansen3
sumber

1

Jika ada yang mencari tombol melingkar lengkap daripada yang saya capai dengan cara ini.

Center(
            child: SizedBox.fromSize(
              size: Size(80, 80), // button width and height
              child: ClipOval(
                child: Material(
                  color: Colors.pink[300], // button color
                  child: InkWell(
                    splashColor: Colors.yellow, // splash color
                    onTap: () {}, // button pressed
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.linked_camera), // icon
                        Text("Picture"), // text
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )

Speedy11
sumber

0

Anda selalu dapat menggunakan tombol bahan jika Anda menggunakan Aplikasi Bahan sebagai Widget utama Anda.

Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
    shadowColor: Colors.lightBlueAccent.shade100,
    child: MaterialButton(
      minWidth: 200.0,
      height: 42.0,
      onPressed: (){//Actions here//},
      color: Colors.lightBlueAccent,
      child: Text('Log in', style: TextStyle(color: Colors.white),),
    ),
  ),
)

Matias
sumber

0

Di Flutter Container()widget, gunakan untuk menata widget Anda. Menggunakan Container()widget, Anda dapat mengatur batas atau sudut bulat widget apa pun

Jika Anda ingin mengatur segala jenis dekorasi styling & mengatur memasukkan widget itu ke dalam Container()widget, yang menyediakan banyak properti untuk dekorasi.

Container(
  width: 100,
  padding: EdgeInsets.all(10),
  alignment: Alignment.center,
  decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.circular(30)), // make rounded corner
  child: Text("Click"),
)

Sanjayrajsinh
sumber

0

untuk menggunakan bentuk apa pun di Tombol Anda, pastikan Anda melakukan semua kode di dalam widget Tombol

 **shape: RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red) ),**

jika Anda ingin menjadikannya Square menggunakan `BorderRadius.circular (0.0), secara otomatis membuatnya menjadi Square

tombol seperti ini`

Berikut adalah semua kode sumber untuk Layar UI beri

 Scaffold(
    backgroundColor: Color(0xFF8E44AD),
    body: new Center(
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
            padding: new EdgeInsets.only(top: 92.0),
            child: Text(
              "Currency Converter",
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(),
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "Amount",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "From",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                  filled: true,
                  fillColor: Colors.white,
                  labelText: "To",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  )),
            ),
          ),
          SizedBox(height: 20.0),
          MaterialButton(
            height: 58,
            minWidth: 340,
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(12)),
            onPressed: () {},
            child: Text(
              "CONVERT",
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
            color: Color(0xFFF7CA18),
          ),
        ],
      ),
    ),
  ),
);

Champ 96k
sumber

0

di sini ada solusi lain

 Container(
                    height: MediaQuery.of(context).size.height * 0.10,
                    width: MediaQuery.of(context).size.width,
                    child: ButtonTheme(
                      minWidth: MediaQuery.of(context).size.width * 0.75,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            side: BorderSide(color: Colors.blue)),
                        onPressed: () async {
                           // do something 
                        },
                        color: Colors.red[900],
                        textColor: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("Button Text,
                              style: TextStyle(fontSize: 24)),
                        ),
                      ),
                    ),
                  ),

ekoRem
sumber

0

Berikut adalah kode untuk masalah Anda, Anda hanya perlu mengambil wadah sederhana dengan jari-jari perbatasan dalam dekorasinya.

    new Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
        color: Colors.blue,
      ),

      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: new Text(
              "Next",
              style: new TextStyle(
                 fontWeight: FontWeight.w500,
                  color: Colors.white,
                  fontSize: 15.0,
               ),
             ),
          ),
        ],
      ),
    ),

Paras Sharma
sumber

0

RaisedButton(
          child: Text("Button"),
          onPressed: (){},
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
          side: BorderSide(color: Colors.red))
        )

shilpa navale
sumber

1

Meskipun kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan tentang bagaimana dan mengapa ini menyelesaikan masalah akan sangat membantu untuk meningkatkan kualitas posting Anda, dan mungkin menghasilkan lebih banyak suara. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, bukan hanya orang yang bertanya sekarang. Harap edit jawaban Anda untuk menambahkan penjelasan dan berikan indikasi tentang batasan dan asumsi apa yang berlaku.

Богдан Опир

ok terima kasih, beri tahu saya di mana saya salah

shilpa navale

Buat tombol bulat / tombol dengan jari-jari perbatasan di Flutter

Jawaban: