Question 79802 in Flutter Question posted in
The official Flutter documentation can be found here.

How do i make a custom button in flutter?

i need help with my app. iam new to flutter and wanted to try to make a homepage with an intresting button. i have design my homepage in figma but i dont really know how to make the button to be the same, so here’s my figma UI design that i want to implement

enter image description here

i use an SVG icon for the button.

and so far in my code, my HomePage only looks like this

enter image description here

and btw this is my HomePage code

import 'package:flutter/material.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'package:medreminder/NewsArticle/news_home.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
import 'package:medreminder/main_reminder.dart';
import 'package:medreminder/home_page.dart';

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  'images/MenuImg.jpg',
                  width: 600,
                  height: 200,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  child: const Text('Reminder'),
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                    );
                  },
                ),
                ElevatedButton(
                  child: const Text('News & Article'),
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(builder: (context) => const NewsHomePage()),
                    );
                  },
                ),
                ElevatedButton(
                  child: const Text('Healty Food Recipe'),
                  onPressed: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

thankyou guys for the attention, any help would mean so much to me. thankyou

Tags:

3

Answers


  1. 0

    I assume you have those images in your asset folder, so you can use this widget to build your custom button:

    Widget buildCustomButton(String imagePath, String title, Function()? onTap) {
    return InkWell(
      onTap: onTap,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            clipBehavior: Clip.antiAlias,
            height: 50,
            width: 50,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
            ),
            child: Image.asset(imagePath, fit: BoxFit.none),
          ),
          SizedBox(
            height: 8,
          ),
          Text(
            title,
            textAlign: TextAlign.center,
          )
        ],
      ),
    );
  }

    and use it like this:

    buildCustomButton('assets/images/reminder.png', 'Reminder', () {
        print("Reminder click");
      }),

    enter image description here

    Login or Signup to reply.
  2. 0

    wrap the widget you want to be a button with inkwell, you can make buttons as you want.

    enter image description here

    InkWell(
              onTap: () {},
              child: Container(
                child: FlutterLogo(
                  size: 80,
                ),
              ))
    Login or Signup to reply.
  3. 0

    Make design as you want then wrap that image with GestureDetector like this.

         GestureDetector (onTap:()
                     {Your Method('Where you want to naviagate')},
                     child:Your Design})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search