如何在颤动中制作滚动视图？

Question

I am making a flutter application in which i need to make a design like in the image

Now what i am doing is that i made a stack widget as main and then using Positioned widget i positined that back button.Now the remaining view of screen should be inside scrollview so i used SingleChildScrollView for that but as that was from top from screen i added top margin to it by putting SingleChildScrollView inside container but that does not make view Scrollable.I am new to the flutter development Please provide me some help in code to make the layout like given in image

https://i.imgur.com/hL8zvXr.jpg

Answer 1

Try to create a layout that gives you a widget tree similar to this:

Column
  Row
    CloseButton
  Text
  GridView
    Card
      Text
  Row
    Column
      Container
        Icon
      Text

Remember to set the mainAxisAlignment property on the Rows and Columns, to properly align the widgets. Also look into decorations on the Container.

In addition if you want the background to have a gradient you can achieve that by wrapping the entire thing in a Container and adding a BoxDecoration with a gradient to the Container's decoration property.

This is only a hint for you, but hopefully it will get you started.

Answer 2

For this kind of menu, you can also create a silvergrid inside a CustomScrollView :

CustomScrollView(
    primary: false,
    slivers: <Widget>[
      SliverPadding(
        padding: const EdgeInsets.all(3.0),
        sliver: SliverGrid.count(
          mainAxisSpacing: 1, //horizontal space
          crossAxisSpacing: 1, //vertical space
          crossAxisCount: 2, //number of items a row
          children: <Widget>[
            MenuButton('dashboard', 'Manager', FontAwesomeIcons.tasks),
            MenuButton('supervisor', 'Supervisor', FontAwesomeIcons.mailchimp),
            MenuButton('ganttBoard', 'Project', FontAwesomeIcons.folder),
            MenuButton('manager', 'Calendar', FontAwesomeIcons.calendar),
            MenuButton('manager', 'BIM', FontAwesomeIcons.sign),
            MenuButton('manager', 'Notes', FontAwesomeIcons.stickyNote),
            MenuButton('manager', 'Documents', FontAwesomeIcons.dochub),
            MenuButton('manager', 'Assigments', FontAwesomeIcons.checkSquare)
          ],
        ),
      ),
    ],
  ),

You can put a List as children instead of these buttons