Assalamu’alaikum Sobat Uda Uni..
Semoga dalam keadaan sehat yaa, pada artikel kali ini kita aku akan sharing tentang bagaimana cara membuat sebuah ImageButton seperti gambar berikut :

Menarik bukan?? Ternyata caranya cukup mudah lho.. dan tidak memerlukan package atau plugin tambahan. Jadi caranya teman-teman hanya perlu menambahkan sebuah Image widget, teks dan Material Widget saja untuk membuat Button yang cantik ini. Untuk menambahkan aksi ketika Button di klik, widget-widget tersebut hanya perlu kita bungkus menggunakan InkWell. Berikut Code untuk tampilan UI diatas :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
            appBar: AppBar(
              title: Text('Image Button'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Material(
                    elevation: 8,
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(28),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    child: InkWell(
                      splashColor: Colors.black26,
                      onTap: () {},
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Ink.image(
                            image: NetworkImage(
                              'https://images.unsplash.com/photo-1629882921753-c58b56a37947?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=449&q=80',
                            ),
                            height: 200,
                            width: 200,
                            fit: BoxFit.cover,
                            // child: Text('Button',
                            //   style: TextStyle(fontSize: 32, color: Colors.white),),
                          ),
                          SizedBox(
                            height: 6,
                          ),
                          Text(
                            'Button',
                            style: TextStyle(fontSize: 32, color: Colors.white),
                          ),
                          SizedBox(
                            height: 6,
                          )
                        ],
                      ),
                    ),
                  ),
                  Material(
                    elevation: 8,
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(28),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    child: InkWell(
                      splashColor: Colors.black26,
                      onTap: () {},
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Ink.image(
                            image: NetworkImage(
                              'https://images.unsplash.com/photo-1629882921753-c58b56a37947?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=449&q=80',
                            ),
                            height: 80,
                            width: 80,
                            fit: BoxFit.cover,
                            // child: Text('Button',
                            //   style: TextStyle(fontSize: 32, color: Colors.white),),
                          ),
                          SizedBox(
                            width: 6,
                          ),
                          Text(
                            'Button',
                            style: TextStyle(fontSize: 32, color: Colors.white),
                          ),
                          SizedBox(
                            width: 6,
                          )
                        ],
                      ),
                    ),
                  ),
                  Material(
                    elevation: 8,
                    color: Colors.blue,
                    // borderRadius: BorderRadius.circular(28),
                    shape: CircleBorder(),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    child: InkWell(
                      splashColor: Colors.black26,
                      onTap: () {},
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Container(
                            decoration: BoxDecoration(
                                color: Colors.transparent,
                                border:
                                    Border.all(color: Colors.blue, width: 3),
                              shape: BoxShape.circle
                            ),
                            child: Ink.image(
                              image: NetworkImage(
                                'https://images.unsplash.com/photo-1629882921753-c58b56a37947?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=449&q=80',
                              ),
                              height: 200,
                              width: 200,
                              fit: BoxFit.cover,
                              // child: Text('Button',
                              //   style: TextStyle(fontSize: 32, color: Colors.white),),
                            ),
                          ),

                        ],
                      ),
                    ),
                  )
                ],
              ),
            )));
  }
}

Gimana?? Cukup mudah kan. Semoga bermanfaat yaa, sampai jumpa di artikel berikutnya..Semangat Belajar ^ ^