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

Flutter – How to make multiple TextButton in one code?

I want to make multiple Text Button in one code. I make this code but it requires a widget. How can i resolve this problem?

Initialize Block

imageButtonInit(int index) {
  AppImage appImage;
  for (int i = 0; i < index; i++) {
    if (i < index) {
      appImage = images[i];
      imageButtonMaker(appImage);
    } else {
      break;
    }
  }
}

imageButtonMaker(AppImage appImage) {
  return Container(
    child: TextButton(
        onPressed: () {},
        child: Column(children: [
          Image.asset(
            appImage.image.toString(),
            cacheHeight: 100,
            cacheWidth: 100,
          ),
          Text(
            appImage.title.toString(),
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
          )
        ])),
  );
}

Main Block

Column menuBuilder(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        "Menu 1",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
      ),
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            imageButtonInit(3), //ERROR HERE it wants to widgets but mine is null type
          ],
        ),
      ),
.
.
.

Changing initialize block to List TextButton but still same problem in Main block.

Tags:

2

Answers


  1. 0

    It’s better you use declarative programming instead of imperative programming.
    It’s possible you did not use StatelessWidget or StatefulWidget.

    
// If you have this model for AppImage
class AppImage {
  final String title;
  final String image;
  AppImage({
    required this.title,
    required this.image,
  });
}

// Here is your Menu
class Menu extends StatelessWidget {
  const Menu({super.key, this.images = const []});
  final List<AppImage> images;
  @override
  Widget build(BuildContext context) {
    return menuBuilder(context);
  }

  Column menuBuilder(BuildContext context) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Text(
        "Menu 1",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
      ),
      // you could use [ListView].
      // ListView(
      //   scrollDirection: Axis.horizontal,
      //   shrinkWrap: true,
      //   children: images.map((appImage) => CustomCard(appImage: appImage)).toList(),
      // )
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children:
              images.map((appImage) => CustomCard(appImage: appImage)).toList(),
        ),
      )
    ]);
  }
}

class CustomCard extends StatelessWidget {
  const CustomCard({
    super.key,
    required this.appImage,
  });
  final AppImage appImage;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextButton(
        onPressed: () {},
        child: Column(
          children: [
            Image.asset(
              appImage.image.toString(),
              cacheHeight: 100,
              cacheWidth: 100,
            ),
            Text(
              appImage.title.toString(),
              style:
                  TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
            )
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    I think that zex_rectooor’s proposal is the most suitable, but still if you don’t want to change your code too much you can try the following:

    
Widget imageButtonMaker(AppImage appImage) {
  return Container(
    child: TextButton(
        onPressed: () {},
        child: Column(children: [
          Image.asset(
            appImage.image.toString(),
            cacheHeight: 100,
            cacheWidth: 100,
          ),
          Text(
            appImage.title.toString(),
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
          )
        ])),
  );
}

Column menuBuilder(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        "Menu 1",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
      ),
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          // HERE: Use imageButtonMaker method directly
          children: images.map((image) => imageButtonMaker(image)).toList(),
        ),
      ),

    With this solution you will return widgets, so the error should disappear, and the imageButtonInit method will no longer be needed so you can remove it.

    Hope it helps-

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

Back To Top
Search