Cara Membuat Gradient Button di Flutter

Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu Cara Membuat Gradient Button di Flutter. Kamu juga bisa belajar lebih dalam lagi tentang Flutter di kelas Flutter bersama BuildWithAngga.

Apa itu Gradient Button?

Gradient Button adalah tombol gradasi yang memberikan efek warna pada tombol agar tombol dapat terlihat menarik dan menjadi lebih indah. Tombol ini dapat membantu melakukan tugas-tugas tertentu seperti membantu menavigasi dari halaman satu ke halaman yang lain, tombol sebagai masuk ke halaman utama, Tombol sebagai Sign up atau Sign in, dan masih banyak lagi. Dalam Flutter, tombol gradasi ini merupakan package yang memberikan banyak manfaat seperti meningkatkan estetika dan daya tarik UI aplikasi dan membantu menyampaikan makna maupun informasi tertentu pada aplikasi.

Cara membuat Gradient Button pada Flutter :

Langkah Pertama : Membuat project baru di Visual Studio Code

Langkah Kedua : Menambahkan Material Package dan RunApp yang berfungsi untuk memanggil aplikasi yang kita buat.

import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}

Langkah Ketiga : Selanjutnya kita perlu membuat stateless widget pada RunMyApp untuk mengembalikan fungsi dari widget MaterialApp yang dapat membantu kita untuk bisa mengatur tema dan lain-lain.

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
  Widget build(BuildContext context) {
    return Scaffold(
}
}

Langkah Keempat : Menambahkan scaffold widget yang berisi AppBar dan Body. AppBar ini mempunyai fungsi untuk memberikan judul pada AppBar.

return Scaffold(
        appBar: AppBar(
          title: const Text('Gradient Button'),
        ),

Langkah Kelima : Pada Body di bagian scaffold, berisi BoxDecoration yang merupakan bagian gradasi yang dibutuhkan. Kemudian LinearGradient yang merupakan bagian untuk menunjukkan efek dari warna yang kita buat, dan Child yang merupakan bagian container yang berisi Elevated Button berfungsi sebagai tombol.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Gradient Button'),
        ),
        body: Center(
            child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.all(0),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10))),
                child: Ink(
                    decoration: BoxDecoration(
                        gradient: const LinearGradient(
                            colors: [Colors.cyan, Colors.green]),
                        borderRadius: BorderRadius.circular(10)),
                    child: Container(
                        width: 120,
                        height: 40,
                        alignment: Alignment.center,
                        child: const Text(
                          'Gradient Button',
                        ))))));
  }
}

Output :

Kesimpulan

Gradient Button merupakan widget yang dapat memungkinkan kamu untuk menambahkan efek gradasi warna yang halus pada tombol aplikasi kamu. Sehingga dengan kamu menambahkan Gradient Button ini dapat membantu kamu membuat aplikasi kamu menjadi lebih menarik dan profesional.

Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!😍 Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!🤩 Yuk buruan belajar bersama BuildWithAngga.