Resize Flat Button and give Horizontal Scrolling option in flutter

Question

If you can see at the top , I have created 4 columns with an Flat button containing an image and a text . I want to give exact width and height for the Flat button is that possible ? Also , I want to give a horizontal scroll so that I can add more columns in the same row. Also , onclick of an image , the corresponding list should be shown below . Here is my code uptil now.

     import 'package:flutter/material.dart';
     import 'widgets.dart';

    void main() => runApp(new MaterialApp(
        title: 'Booze Up',
      theme: new ThemeData(
  primarySwatch: Colors.red,
),
home: new MyHomePage('Booze Up'),
routes: <String,WidgetBuilder>{
  "/MyHomePage2": (BuildContext context) => new MyHome()
}
));

       class MyHomePage extends StatelessWidget {

    int counter =0;
    String title;
    MyHomePage(this.title);

     @override
     Widget build(BuildContext context) {


        Text text = new Text("dev");
       Text text2 = new Text("Sneha");
       Text text3 = new Text("Prashant");

var pad = const EdgeInsets.all(10.0);

Padding pad1 = new Padding(child: text, padding:pad);
 Padding pad2 = new Padding(child: text2, padding:pad);
  Padding pad3 = new Padding(child: text3, padding:pad);

     ListView listView = new ListView(children: <Widget>[new 
     Image.asset('images/party.jpg'),pad1,pad2,pad3]);

  Drawer drawer = new Drawer(child:listView); 

// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return new Scaffold(
  drawer: drawer,
  appBar: new AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: new Text(title),
  ),
  body:
  new Center(

    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: new Column(
             mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
              new Icon(Icons.camera),
              new Padding(padding: new EdgeInsets.fromLTRB(0.0,0.0, 5.0,0.0)),
            new RaisedButton(
            color: Colors.black,
          child: 
          new Text(  'Party Home',
          style: new TextStyle(fontSize: 20.0,fontStyle: 
               FontStyle.italic,color: Colors.white),
                   ),
          onPressed: () {
                  Navigator.of(context).pushNamed("/MyHomePage2");
          },                
       )]),
       new Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
         new Icon(Icons.favorite),
        new Padding(padding: new EdgeInsets.fromLTRB(0.0,0.0, 5.0,0.0)),
        new Text(
          'Pub Hopping',
         style: new TextStyle(fontSize: 20.0,fontStyle: FontStyle.italic),

        ),
         ]),
        new Image.asset('images/party.jpg'),   
          ],
        )
        , 
    ),

  floatingActionButton: new FloatingActionButton(
    onPressed: null,
    child: new Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);
   }


  }

        class MyHome extends StatefulWidget
        {
         @override
        State<StatefulWidget> createState() => new MyHomePage2();
         }

        class MyHomePage2 extends State<MyHome> {
        List items = new List() ;


        @override
        Widget build(BuildContext context) {

var abc = MediaQuery.of(context).size;

print(abc.width);

var width = abc.width/4;

         Text text = new Text("Dev");
        Text text2 = new Text("Sneha");
        Text text3 = new Text("Prashant");
      Text text4 = new Text("Vikesh");

var pad = const EdgeInsets.all(10.0);

Padding pad1 = new Padding(child: text, padding:pad);
 Padding pad2 = new Padding(child: text2, padding:pad);
  Padding pad3 = new Padding(child: text3, padding:pad);
  Padding pad4 = new Padding(child: text4, padding:pad);

      ListView listView = new ListView(children: <Widget>[new 
      Image.asset('images/party.jpg'),pad1,pad2,pad3,pad4]);


     ListView listView2 = new ListView(children: <Widget>[new Text("Jacob 
        Creek"),new Text("Sula red"),new Text("Yellow tale"),new 
        Text("Chenin Blanc")]);

        Drawer drawer = new Drawer(child: listView);

return new Scaffold(
  drawer: drawer,

  appBar: new AppBar(
    title: new Text('Booze Up'),
  ),
  body:
     new Column(
      children: <Widget>[
        new Row(
           children: <Widget>[
                 new Column(
          children: <Widget>[
                  new FlatButton(child: new 
         Image.asset('images/party.jpg',width:width,height: 
          width),onPressed: buildlist('button1'),),
          new Text('Juice', style: new TextStyle(fontSize: 20.0,fontStyle: 
          FontStyle.italic)),        
          ]),
                new Column(
          children: <Widget>[
        new FlatButton(child: new 
       Image.asset('images/party.jpg',width:width,height: width),onPressed: 
        buildlist('button2')),
          new Text('Cocktail', style: new TextStyle(fontSize: 
         20.0,fontStyle: FontStyle.italic)) ,                     
          ]),
                  new Column(
          children: <Widget>[
      new FlatButton(child: new Image.asset('images/party.jpg',width:width,height: width),onPressed: buildlist('button3')),
          new Text('Moocktail', style: new TextStyle(fontSize: 20.0,fontStyle: FontStyle.italic)),
          ]),
                  new Column(
          children: <Widget>[
     new FlatButton(child: new Image.asset('images/party.jpg',width:width,height: width),onPressed: buildlist('button4')),
          new Text('Juice', style: new TextStyle(fontSize: 20.0,fontStyle: FontStyle.italic)),
          ])
           ]),
        new Expanded(
          child: new ListView(
            padding: new EdgeInsets.fromLTRB(10.0, 10.0, 0.0,10.0),
            children: items,
          ),
        )]
     ),
  floatingActionButton: new FloatingActionButton(
    onPressed: null,
    child: new Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);
            }

buildlist(String s ) {

    print("entered buildlist"+ s);

  List refresh = new List();
  if(s=='button1')
  {
  refresh = [
   new Refreshments("Watermelon",250),
    new Refreshments("Orange",275),
    new Refreshments("Pine",300),
    new Refreshments("Papaya",225),
     new Refreshments("Apple",250),
];
  }
  else if(s=='button2')

    { refresh = [
      new Refreshments("Pina Colada",250),
      new Refreshments("Bloody Mary",275),
      new Refreshments("Long Island Ice tea",300),
      new Refreshments("Screwdriver",225),
      new Refreshments("Fusion Cocktail",250),
];
    }
    else if(s=='button3')
    {
    refresh  = [
       new Refreshments("Virgin Pina Colada",250),
      new Refreshments("Virgin Mary",275),
       new Refreshments("Strawberry Flush",300),
      new Refreshments("Mango Diver",225),
      new Refreshments("Peach Delight",250),
];
    }
    else{
 refresh = [
       new Refreshments("Absolute",250),
       new Refreshments("Smirnoff",275),
        new Refreshments("White Mischief",300),
        new Refreshments("Romanov",225),
        new Refreshments("Blender's Pride",250),
];
    }


 for(var item in refresh)
 {
   items.add(new ItemsList(item));
 }

  }


                 }

       class  Refreshments 
 {
        String name;
          int price;

           Refreshments(this.name,this.price);
 }


            class ItemsList extends StatelessWidget
      {
            final Refreshments refreshments;

           ItemsList (this.refreshments);

      @override
        Widget build(BuildContext context) {
     return new ListTile(
      onTap: null,
      title: new Text(refreshments.name),
  );

         }
        }

Shady Aziza · Accepted Answer · 2017-12-01T10:37:04.603

To have an exact width and height, use a Container as the parent to your FlatButton, it provides you with these properties. *Darky pointed out that using SizedBox is a better solution.
Use a ListView and specify that scrollDirection: Axis.horizontal to enable horizontal scrolling.
Using ListView.builder gives you the ability to loop through your list of children widgets, such that you can now the widget that is being interacted with by simply reading the index of a widget in the list.

Example

import "package:flutter/material.dart";

class LetsParty extends StatefulWidget {
  @override
  _LetsPartyState createState() => new _LetsPartyState();
}

class _LetsPartyState extends State<LetsParty> {
  Image _partyImage = new Image.network(
      "http://www.freshcardsgifts.co.uk/images/_lib/animal-party-greetings-card-3003237-0-1344698261000.jpg");
  final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(title: new Text("Let's Party"),),
      body: new ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 10, //add the length of your list here
          itemBuilder: (BuildContext context, int index) {
            return new Column(
              children: <Widget>[

                ///Flexible let's your widget flex in  the given space, dealing with the overflow you have
                //  new Flexible(child: new FlatButton(onPressed: ()=>print("You pressed Image No.$index"), child: _partyImage)),
                new Container(child: new FlatButton(onPressed: () =>
                    scaffoldKey.currentState.showSnackBar(new SnackBar(
                        content: new Text("You pressed Image No.$index"))),
                    child: _partyImage),
                  width: 100.0, height: 100.0,),
                //Exact width and height, consider adding Flexible as a parent to the Container
                new Text("Text$index")
              ],
            );
          }),
    );
  }
}

Use `SizedBox` instead of `Container` to resize children. This is clearer and has more options. — Rémi Rousselet, Dec 01 '17 at 10:28
This is a very good demo given by you. It removes a lot of my redundant code . But, the setState method in buildlist is called even before the page is built , why is that ? In this question , I forgot setState() later I incorporated it in my program . Please can u help. — Divyang Shah, Dec 01 '17 at 10:28
@DivyangShah I am sorry I do not see any setState in your code — Shady Aziza, Dec 01 '17 at 10:45
that's what i included it later , after posting this question . The main issue is buildlist() is called even before the page has loaded. I have enclosed the code in buildlist inside setState .Like buildlist() { setState( () { ...code});} — Divyang Shah, Dec 01 '17 at 10:50
This is irrelevant to what are you were asking here, maybe open another question with the relevant code. — Shady Aziza, Dec 01 '17 at 10:54
Link for the new post: https://stackoverflow.com/questions/47592301/setstate-or-markneedsbuild-called-during-build — Divyang Shah, Dec 01 '17 at 11:22

Resize Flat Button and give Horizontal Scrolling option in flutter

1 Answers1