Flutter'da Widgetlar Arasına Çizgi (Divider)Ekleme ve Üzerine Yazı Yazma Nasıl Yapılır?

Flutter'da bir arayüz tasarlarken widgetların arasında bir çizgi koymak isteyebilirsiniz. Bu sayede arayüzleriniz daha derli toplu görünecektir. Pek çok uygulamada da kullanılan basit bir widget var bu işi yapan: Divider(),

Çizgi eklemek istediğiniz yere Divider(), yazarak ekleyebilirsiniz. Kullanımı bu kadar kolay. Renk vermek için ise color: özelliğini kullanabilirsiniz. 

Divider(color: Colors.red,),

Divider'a Nasıl Yazı Eklenir?

Divider'ın ortasına bir yazı ekleyerek yukarıdaki gibi bir görünüm elde etmek istiyor olabilirsiniz. Divider'ın böyle bir özelliği yok ama küçük bir hile ile bu işi çözebiliriz. Bunun için bir Row widget'ın içine iki diveder, aralarında bir text ekleyeceğiz.

İşte kullanacağımız kodlar:

En basit haliyle:

Row(
    children: <Widget>[
        Expanded(
            child: Divider()
        ),       

        Text("OR"),        

        Expanded(
            child: Divider()
        ),
    ]
)

Biraz daha güzel görünen hali:

Column(children: <Widget>[
            Row(
              children: <Widget>[Text("above")],
            ),
            Row(children: <Widget>[
              Expanded(
                child: new Container(
                    margin: const EdgeInsets.only(left: 10.0, right: 20.0),
                    child: Divider(
                      color: Colors.black,
                      height: 36,
                    )),
              ),
              Text("OR"),
              Expanded(
                child: new Container(
                    margin: const EdgeInsets.only(left: 20.0, right: 10.0),
                    child: Divider(
                      color: Colors.black,
                      height: 36,
                    )),
              ),
            ]),
            Row(
              children: <Widget>[Text("below ")],
            ),
          ])