0

Grid view with flutter icons with 2 columns and Each Images Text under the image aligned bottom center with 300 by 300 pixel dimensions or icon size 98 or 85My code is as below`import

    appBar: AppBar(title: Text("Digital Directory"),),
  body: Center(
      child: GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        crossAxisCount: 2,
        children: <Widget>[
          Container(
            color: Colors.cyan[100],
             child: GestureDetector
          (
          onTap:(){

            Navigator.of(context).push(MaterialPageRoute(builder:(context)=>MobileAccessoriesPage(),
            ),
            );
          },

    child: Center (child:Text ('Mobiles'),icon:Icons.mobile_screen_share),

         ),
  ),

I am building grid view Application with flutter flat icons and I want to navigate when clicked on Flat Icons to another screens (i.e .dart page/screen)`

sr2k23
  • 127
  • 1
  • 2
  • 12

1 Answers1

0

Change the Child Of Center with the code below:

Center(
   child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                              Text(
                                'Mobiles',
                              ),
                              Icon(Icons.mobile_screen_share),
                            ],
                          ),
                         )

This would make the text 'mobiles' and the Icon to appear side by side. If you are not happy with the alignment change the mainAxisAlignment and the crossAxisAlignment

Adithya Shetty
  • 1,247
  • 16
  • 30
  • vThank You now the click event is working fine and image is showing. Please guide me How to increase the size of the icon and show the Text under the image Bottom center aligned properly. – sr2k23 Sep 05 '20 at 13:12
  • Change the icon size by specifying it in the `Icon(Icons.mobile_screen_share, size:50.0)` . I did not get the text under the image part it would be better if you could elaborate more. – Adithya Shetty Sep 06 '20 at 04:55
  • I want the Title Text to be aligned to the bottomcenter i.e under each image to the center aligned properly – sr2k23 Sep 07 '20 at 07:05
  • This would make the text 'mobiles' and the Icon to appear side by side. If you are not happy with the alignment change the mainAxisAlignment and the crossAxisAlignment. Yes I am not Happy I want the Text Alignment to be aligned to the bottom center . please gudie me on it – sr2k23 Sep 07 '20 at 07:06
  • I would suggest you look into `Columns`, `Row` and `Stack` widgets. – Adithya Shetty Sep 07 '20 at 08:21
  • OK it would be better if you help me with inserting cards and Text alignment etc. – sr2k23 Sep 07 '20 at 10:07