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

How do i put a text below an image button? – Flutter

iam new to flutter and i would like to add a text under a button, but i cant seems to do it, so far here’s my result

..

enter image description here

i use two Rows for the button and the text,
as you guys can see the text isnt align really well, i tried using ElevatedButton but the text is beside the button not below it.
this is my code so far:

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: 170,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                IconButton(
                  icon: Image.asset('images/reminder.png'),
                    iconSize: 50,
                    onPressed: () {
                      Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                    );
                    },
                  ),
               IconButton(
                  icon: Image.asset('images/news.png'),
                    iconSize: 50,
                    onPressed: () {},
                  ),
                IconButton(
                  icon: Image.asset('images/recipe.png'),
                    iconSize: 50,
                    onPressed: () {},
                  ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
               children: [
                Text("Reminder"),
                Text("News"),
                Text("Recipe")
               ],
            )
          ],
        ),
      ),
    );
  }
}

if anyone know how to do it, please help. it will mean so much to me. thank you

Tags:

4

Answers


  1. 0

    try to put each iconButton inside a Column with its Text widget, try this 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: 170,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/reminder.png'),
                      iconSize: 50,
                      onPressed: () {
                        Navigator.of(context, rootNavigator: true).push(
                          MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                        );
                      },
                    ),
                    Text("Reminder")
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/news.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    Text("News")
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/recipe.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    Text("Recipe")
                  ],
                ),
              ],
            ),
            // Row(
            //   mainAxisAlignment: MainAxisAlignment.,
            //   children: [, , ],
            // )
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    You can adjust Layout by using Row and Column

     @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _showButton('assets/images/image1.jpg', 'Reminder'),
                _showButton('assets/images/image2.jpg', 'News'),
                _showButton('assets/images/image2.jpg', 'Recipe'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _showButton(String imagePath, String text) {
    return Column(
      children: [

        IconButton(
          icon: Image.asset(imagePath),
          iconSize: 50,
          onPressed: () {
            // Navigator.of(context, rootNavigator: true).push(
            //   MaterialPageRoute(builder: (context) => const ReminderHomePage()),
            // );
          },
        ),

        Text(
          text,
          textAlign: TextAlign.center,
        )
      ],
    );
  }
    Login or Signup to reply.
  3. 0

    if u want to change the colour of the text button u can, its just commented out for you

    import 'package:flutter/material.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: 170,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/reminder.png'),
                      iconSize: 50,
                      onPressed: () {
                        // Navigator.of(context, rootNavigator: true).push(
                        //   MaterialPageRoute(
                        //       builder: (context) => const ReminderHomePage()),
                        // );
                      },
                    ),
                    TextButton(
                        onPressed: () => print('reminder'),
                        child: Text(
                          'Reminder',
                          //style: TextStyle(color: Colors.black),
                        ))
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/news.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    TextButton(
                        onPressed: () => print('News'),
                        child: Text(
                          'News',
                          // style: TextStyle(color: Colors.black),
                        ))
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/recipe.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    TextButton(
                        onPressed: () => print('Recipe'),
                        child: Text(
                          'Recipe',
                          style: TextStyle(color: Colors.black),
                        ))
                  ],
                ),
              ],
            ),
            // Row(
            //   mainAxisAlignment: MainAxisAlignment.spaceAround,
            //   children: [Text("Reminder"), Text("News"), Text("Recipe")],
            // )
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  4. 0

    Try below code hope its helpful to you, I have try it two ways Using Column Widget and Gridview.builder(). Just replace my images with your image

    1. Using Column Widget

     Padding(
    padding: const EdgeInsets.all(10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: const [
        ImageRow(
          imageUrl:
              'https://cdn.iconscout.com/icon/free/png-256/reminder-1605670-1361019.png',
          imageName: 'Reminder',
        ),
        ImageRow(
          imageUrl: 'https://cdn-icons-png.flaticon.com/512/21/21601.png',
          imageName: 'News',
        ),
        ImageRow(
          imageUrl:
              'https://cdn-icons-png.flaticon.com/512/1041/1041373.png',
          imageName: 'Recipe',
        ),
      ],
    ),
  ),

    ImageRow Class:

    class ImageRow extends StatelessWidget {
  const ImageRow({
    Key? key,
    required this.imageName,
    required this.imageUrl,
  }) : super(key: key);
  final String imageUrl;
  final String imageName;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Image.network(
          imageUrl,
          height: 50,
        ),
        const SizedBox(
          height: 5,
        ),
        Text(imageName),
      ],
    );
  }
}

    2. Using Gridview.builder()

    Declare List on your imageName and imageUrl

      List medicineInfo = [
    {
      'imageUrl':
          'https://cdn.iconscout.com/icon/free/png-256/reminder-1605670-1361019.png',
      'imageName': 'Reminder',
    },
    {
      'imageUrl': 'https://cdn-icons-png.flaticon.com/512/21/21601.png',
      'imageName': 'News',
    },
    {
      'imageUrl': 'https://cdn-icons-png.flaticon.com/512/1041/1041373.png',
      'imageName': 'Recipe',
    },
  ];

    GridView Widget:

      Padding(
          padding: const EdgeInsets.all(20),
          child: GridView.builder(
            shrinkWrap: true,
            itemCount: medicineInfo.length,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 20,
            ),
            itemBuilder: (context, index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Image.network(
                    medicineInfo[index]['imageUrl'],
                    height: 50,
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  Text(
                    medicineInfo[index]['imageName'],
                  ),
                ],
              );
            },
          ),
        ),

    Result Screen-> image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search