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

How to have Text with Icon in center Flutter using gridview?

How can I adjust my code to work as the button on this image?
I’m trying to have Text with Icon in center Flutter using a button with gridview.


class ServicePage extends StatelessWidget {
  const ServicePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: List.generate(20, (index) {
        return Center(
          child: Wrap(
            direction: Axis.vertical,
            crossAxisAlignment: WrapCrossAlignment.center,
            children: <Widget>[
              ElevatedButton.icon(
                icon: Icon(
                  Icons.home,
                  size: 20,
                ),
                label: Text('測試$index 15146513515464515144635125131'),
                onPressed: () {
                  print('我是第$index個');
                },
              )

            ],
          ),
        );
      }),
    );
  }
}
Tags:

2

Answers


  1. 0

    You can use Column inside button:

           ElevatedButton(
           child:
              Column(
                children:[
                  Icon(Icons.add),
                  Text("Button")]),
            onPressed:(){})

    Output:
    image

    Login or Signup to reply.
  2. 0

    you can wrap the Icon and Text widgets in a Column widget like this:

    import 'package:flutter/material.dart';

class ServicePage extends StatelessWidget {
  const ServicePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: List.generate(20, (index) {
        return Center(
          child: ElevatedButton(
            onPressed: () {
              print('我是第$index個');
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.home,
                  size: 20,
                ),
                SizedBox(height: 8),
                Text(
                  '測試$index 15146513515464515144635125131',
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search