Elevation, boxShadow ? add Shadow to the Widget Flutter

Halo teman – teman,
Kali ini kita akan membahas shadow pada widget. Shadow atau bayangan ini secara manual akan ada pada AppBar, Card, dan pada beberapa button seperti MaterialButton.

Jadi kali ini kita akan menambahkannya pada Container, dengan menambahkan boxShadow di dalamnya. Adapun untuk code nya seperti berikut :

Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    spreadRadius: 0,
                    blurRadius: 1.5,
                    offset: Offset(0, 0),
                  )
                ],
                borderRadius: BorderRadius.circular(5),
                color: Colors.white,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Identitas Sekolah',
                        style: TextStyle(
                          fontSize: 14,
                          fontFamily: 'OpenSans',
                          fontWeight: FontWeight.w600,
                          color: Colors.black,
                        ),
                      ),
                      Icon(
                        Icons.keyboard_arrow_right_sharp,
                        color: Colors.black,
                      )
                    ],
                  ),
                  SizedBox(height: 15),
                  Row(
                    children: [
                      Text(
                        'Nama Sekolah :',
                        style: TextStyle(
                          fontSize: 12,
                          fontFamily: 'OpenSans',
                          color: Colors.black.withOpacity(0.75),
                        ),
                      ),
                      SizedBox(width: 5),
                      Text(
                        'TK Islam Terpadu Dar el-Iman',
                        style: TextStyle(
                          fontSize: 12,
                          fontFamily: 'OpenSans',
                          fontWeight: FontWeight.w600,
                          color: Colors.black.withOpacity(0.75),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 3),
                  Text(
                    'NPSN :',
                    style: TextStyle(
                      fontSize: 12,
                      fontFamily: 'OpenSans',
                      color: Colors.black.withOpacity(0.75),
                    ),
                  ),
                  SizedBox(height: 3),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Alamat Sekolah :',
                        style: TextStyle(
                          fontSize: 12,
                          fontFamily: 'OpenSans',
                          color: Colors.black.withOpacity(0.75),
                        ),
                      ),
                      SizedBox(width: 5),
                      Expanded(
                        child: Column(
                          children: [
                            Text(
                              'Jalan Sawahan Dalam I No. 11 Kelurahan Sawahan Dalam - Padang Timur',
                              style: TextStyle(
                                fontSize: 12,
                                fontFamily: 'OpenSans',
                                fontWeight: FontWeight.w600,
                                color: Colors.black
                                    .withOpacity(0.75),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                  
                ],
              ),
            ),


Sendangkan pada widget card seperti berikut :

Card(
              // elevation: 3,
              shadowColor: Color(0xff059F41),
              child: IconButton(
                onPressed: () {},
                icon: Icon(Icons.filter),
              ),
            ),

Secara manual Card sendiri sudah memiliki shadow, untuk mengganti warna pada shadow cukup dengan manambahkan shadowCalor di dalam Card, fungsi elevation di sini yaitu memberikan ukuran dari shadow yang diberikan.

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here