{"id":6843,"date":"2021-06-17T11:30:07","date_gmt":"2021-06-17T06:00:07","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6843"},"modified":"2023-01-20T18:55:00","modified_gmt":"2023-01-20T13:25:00","slug":"mobile-ux-design-listview-and-gridview","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/","title":{"rendered":"Mobile UX Design -ListView, GridView and Gradient"},"content":{"rendered":"

ListView is the Flutter widget commonly used scrolling widget, It displays children one after another in a scrolling page. children scrolling on the main axis and also it has to fill the cross axis of the listview.<\/span><\/p>\n

If the item value is non-null the item auto adjust in a scrolling way, <\/span>Specifying an item extension \u00a0is more efficient than letting the children determine their own extent because the scrolling machinery can make use of the foreknowledge of the children’s extent to save work<\/span><\/p>\n

There are four-way to create a ListView<\/strong><\/p>\n

    \n
  1. Using Default Constructor<\/span><\/li>\n
  2. Using ListView.builder\u00a0<\/span><\/li>\n
  3. Using ListView .separated<\/span><\/li>\n
  4. Using ListView.custom<\/span><\/li>\n<\/ol>\n

    \"\"<\/p>\n

    ListView Creation using default constructor:——-<\/b><\/p>\n

    It takes a list of children of the widget<\/span><\/p>\n

    ListView(\r\n\r\nList<Children>(\u00a0 \u00a0 )\r\n\r\n);<\/pre>\n
    This is efficient when you have a limited number of a child because all item preloaded in memory\u00a0<\/span><\/p>\n
    ListView( padding: const EdgeInsets.all(8),\r\n\r\n\u00a0children: <Widget>[ Container(\u00a0\r\n\r\nheight: 50,\r\n\r\n\u00a0color: Colors.amber[600],\r\n\r\n\u00a0child: const Center(child: Text('Entry A')), ),\r\n\r\n\u00a0Container( height: 50, color: Colors.amber[500],\r\n\r\n\u00a0child: const Center(child: Text('Entry B')), ),\r\n\r\n\u00a0Container( height: 50, color: Colors.amber[100],\u00a0\r\n\r\nchild: const Center(child: Text('Entry C')\r\n\r\n),\r\n\r\n\u00a0),\r\n\r\n\u00a0],\r\n\r\n\u00a0)<\/pre>\n
    ListView Creation Using ListView.builder:——-<\/b><\/p>\n
    ListView.builder constructor takes indexedwidgetBuilder which build child dynamically<\/span><\/p>\n
    ListView.builder(\r\n\r\nItemcount:listofchild.size,\r\n\r\nitemBuilder:(context,index){\r\n\r\nReturn ListTile(\r\n\r\ntitle:Text(\u201cHi this is title\u201d);\r\n\r\n)\r\n\r\n}\r\n\r\n)<\/pre>\n
    This is efficient when you have a large number of a child because the builder method execute only for those elements which are showing on the screen<\/span><\/p>\n
    ListView.builder(\r\n\r\n\u00a0\u00a0padding: const EdgeInsets.all(8),\r\n\r\n\u00a0\u00a0itemCount: entries.length,\r\n\r\n\u00a0\u00a0itemBuilder: (BuildContext context, int index) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Container(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 50,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.amber[colorCodes[index]],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Center(child: Text('Entry ${entries[index]}')),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0}\r\n\r\n);<\/pre>\n
    ListView Creation Using ListView .separated:——<\/b><\/p>\n
    List<\/span>View.separated constructor takes two parameter\u00a0<\/span><\/p>\n
      \n
    1. indexWidgetBuilder:itemBuilder<\/span><\/li>\n
    2. separaterBuilder<\/span><\/li>\n<\/ol>\n
      site builder build child on demand and separaterBuilder build separate between the child\u00a0<\/span><\/p>\n
      ListView.separated(\r\n\r\n\u00a0\u00a0padding: const EdgeInsets.all(8),\r\n\r\n\u00a0\u00a0itemCount: entries.length,\r\n\r\n\u00a0\u00a0itemBuilder: (BuildContext context, int index) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Container(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 50,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.amber[colorCodes[index]],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Center(child: Text('Entry ${entries[index]}')),\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0separatorBuilder: (BuildContext context, int index) => const Divider(),\r\n\r\n);<\/pre>\n
      ListView Creation using ListView.custom:——-<\/b><\/p>\n
      Listview, the custom constructor takes silver child delegate which provides the ability to create a custom child model<\/span><\/p>\n
      ListView(\r\n\r\n\u00a0\u00a0shrinkWrap: true,\r\n\r\n\u00a0\u00a0padding: const EdgeInsets.all(20.0),\r\n\r\n\u00a0\u00a0children: const <Widget>[\r\n\r\n\u00a0\u00a0\u00a0\u00a0Text(\"I'm dedicating every day to you\"),\r\n\r\n\u00a0\u00a0\u00a0\u00a0Text('Domestic life was never quite my style'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0Text('When you smile, you knock me out, I fall apart'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0Text('And I thought I was so smart'),\r\n\r\n\u00a0\u00a0],\r\n\r\n)<\/pre>\n
      Child element lifecycle:——<\/b><\/p>\n
        \n
      1. Creation<\/span><\/li>\n
      2. Destruction<\/span><\/li>\n<\/ol>\n
        Creation:-<\/strong><\/p>\n
        When the child displaying on the screen, called the creation phase<\/span><\/p>\n
        Destruction:-<\/strong><\/p>\n
        When a child scrolling out of view it automatically destroys and erases from memory<\/span><\/p>\n
        GridView<\/b><\/p>\n
        GridView is a widget in a flutter that used to display the element one after another or we can say\u00a0 that GridView is used to display the child in 2-D Array\u00a0<\/span><\/p>\n
        \"\"<\/p>\n
        GridView can implement in a various way:—<\/b><\/p>\n
          \n
        1. Using count\u00a0<\/span><\/li>\n
        2. Using builder<\/span><\/li>\n
        3. Using extent<\/span><\/li>\n<\/ol>\n
          Using GridView.count()<\/b><\/p>\n
          GridView.count <\/b>is commonly used way because we have known child-size so developer know about the number of row and column\u00a0<\/span><\/p>\n
          Parameters of GridView.count()<\/strong><\/p>\n
            \n
          1. crossAxisCount: it is used to declare the number of column in the view\u00a0<\/span><\/li>\n
          2. crossAxisSpacing:- it is used to declare the spacing the between child listed in cross-axis\u00a0<\/span><\/li>\n
          3. mainaxisspacing:- it is used to declare the spacing the between child listed in the main axis\u00a0<\/span><\/li>\n
          4. scrollDirection:- is used to define the scrolling direction of child<\/span><\/li>\n
          5. reverse:-it reverse the list in the opposite direction<\/span><\/li>\n
          6. physics:-it used to determine how list behave when we reach start to end\u00a0<\/span><\/li>\n<\/ol>\n
            Example;-<\/strong><\/p>\n
            GridView.count(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crossAxisCount: 3,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crossAxisSpacing: 4.0,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mainAxisSpacing: 8.0,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children: List.generate(choices.length, (index) {\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Center(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: SelectCard(choice: choices[index]),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/pre>\n
            GridView.builder()——<\/b><\/p>\n
            GridView.builder comes in role when we have large amount of data.<\/span> the GridView.builder() construct takes SliverGridDelegateWithFixedCrossAxisCount and SliverGridDelegateWithMaxCrossAxisExtent<\/span><\/p>\n
            The common attribute used\u00a0<\/span><\/p>\n
            Itemcount:-<\/strong>the number of child you want to display\u00a0<\/span><\/p>\n
            gridDelegate:-<\/strong> it determines the grid, its argument should not be null\u00a0<\/span><\/p>\n
            itemBuilder:-<\/strong>it is used to create the item that will be displayed on the screen<\/span><\/p>\n
            Note :-t will be called only when the indices >= zero && indices < itemCount.<\/strong><\/p>\n
            GridView.builder(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemCount: images.length,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crossAxisCount: 2,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crossAxisSpacing: 4.0,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mainAxisSpacing: 4.0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemBuilder: (BuildContext context, int index){\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Image.network(images[index]);\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0);<\/pre>\n
            GridView.extent()—–<\/b><\/p>\n
            GridView.extent() is used to customize the view with custom\u00a0 extent means each tile has maximum tile extent<\/span><\/p>\n
            GridView.extent(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0primary: false,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: const EdgeInsets.all(16),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crossAxisSpacing: 10,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mainAxisSpacing: 10,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0maxCrossAxisExtent: 200.0,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children: <Widget>[\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Container(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: const EdgeInsets.all(8),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: const Text('First', style: TextStyle(fontSize: 20)),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.yellow,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Container(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: const EdgeInsets.all(8),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: const Text('Four', style: TextStyle(fontSize: 20)),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.yellow,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Container(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: const EdgeInsets.all(8),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: const Text('Fifth', style: TextStyle(fontSize: 20)),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.yellow,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Container(\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: const EdgeInsets.all(8),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: const Text('Six', style: TextStyle(fontSize: 20)),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.blue,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)),\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0);<\/pre>\n
            Linear Gradient<\/b><\/p>\n
            Linear gradient<\/span> as per name <\/span>this gradient flows over a simple linear stretch. Over this stretch is a smooth color transition, This\u00a0 is <\/span>\u00a0<\/span>used in BoxDecoration for decoration of child, it consists of two main parameters as<\/span><\/p>\n
              \n
            1. Begin\u00a0 \u00a0 \u00a0 \u00a0value lie between 0.0 and 1.0<\/span><\/li>\n
            2. End\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 value lies between 0.0 and 1.0<\/span><\/li>\n<\/ol>\n
              Note:- the value is infraction so the same gradient use for varying sized boxes without changing the parameter.<\/span><\/p>\n
              The color describes by the list of color objects, There must be at least two colors in two colors. it specifies the fraction of vector from start to end between 0.0 and 1.0 for each color. if the value will null color uniformly distribution happen.<\/span><\/p>\n
              \"\"<\/p>\n
              Example:-<\/strong><\/p>\n
              BorderRadius<\/span>.<\/span>circular<\/span>(<\/span>15<\/span>),<\/span>
              \n<\/span>splashColor: <\/span>Theme<\/span>.<\/span>of<\/span><\/i>(context).<\/span>primaryColor<\/span>,<\/span>
              \n<\/span>
              \n<\/span>child: <\/span>Container<\/span>(padding: <\/span>EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>15<\/span>),<\/span>
              \n<\/span>\u00a0 child: <\/span>Text<\/span>(<\/span>title<\/span>),<\/span>
              \n<\/span>\u00a0 decoration: <\/span>BoxDecoration<\/span>(<\/span>
              \n<\/span>
              \n<\/span>\u00a0 \u00a0 gradient: <\/span>LinearGradient<\/span>(colors: [<\/span>color<\/span>.withOpacity(<\/span>.7<\/span>),<\/span>color<\/span>.withOpacity(<\/span>.5<\/span>)],<\/span>
              \n<\/span>\u00a0 \u00a0 begin:<\/span>Alignment<\/span>.<\/span>topLeft<\/span><\/i>,<\/span>
              \n<\/span>\u00a0 \u00a0 end:<\/span>Alignment<\/span>.<\/span>bottomRight <\/span><\/i>),<\/span>
              \n<\/span>\u00a0 \u00a0 borderRadius: <\/span>BorderRadius<\/span>.<\/span>circular<\/span>(<\/span>15<\/span>)<\/span>
              \n<\/span>\u00a0 ),<\/span><\/p>\n
              Radial Gradient:—<\/b><\/p>\n
              This is another very important key for designing, This type of gradient changes its color with respect to the center point.<\/span><\/p>\n
              Container(\r\n\r\n\u00a0\u00a0decoration: BoxDecoration(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0gradient: RadialGradient(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0colors: [Colors.yellow, Colors.deepPurple],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Add one stop for each color\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Values should increase from 0.0 to 1.0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0stops: [0.1, 0.5, 0.75]\r\n\r\n\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0),\r\n\r\n),<\/pre>\n
              Like linear-gradient, color class contain at least two-color, and values should lie between 0.0 and 1.0<\/span><\/p>\n
              \"\"<\/p>\n
               <\/p>\n","protected":false},"excerpt":{"rendered":"
              ListView is the Flutter widget commonly used scrolling widget, It displays children one after another in a scrolling page. children scrolling on the main axis and also it has to fill the cross axis of the listview. If the item value is non-null the item auto adjust in a scrolling way, Specifying an item extension […]<\/p>\n","protected":false},"author":1,"featured_media":6844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[651],"tags":[655,654,653,150,652,11],"class_list":["post-6843","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design","tag-gradient","tag-gridview","tag-gridview-and-gradient","tag-listview","tag-mobile-ux-design","tag-ux-design"],"yoast_head":"\nMobile UX Design -ListView, GridView and Gradient<\/title>\n<meta name=\"description\" content=\"List view and grid view for mobile user experience design. Many designers use grid view because it's more appealing to the eye.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile UX Design -ListView, GridView and Gradient\" \/>\n<meta property=\"og:description\" content=\"List view and grid view for mobile user experience design. Many designers use grid view because it's more appealing to the eye.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T06:00:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:25:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/06\/List-vs-grid.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Mobile UX Design -ListView, GridView and Gradient\",\"datePublished\":\"2021-06-17T06:00:07+00:00\",\"dateModified\":\"2023-01-20T13:25:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/\"},\"wordCount\":713,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/List-vs-grid.png\",\"keywords\":[\"Gradient\",\"GridView\",\"GridView and Gradient\",\"ListView\",\"Mobile UX Design\",\"UX Design\"],\"articleSection\":[\"UX Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/\",\"name\":\"Mobile UX Design -ListView, GridView and Gradient\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/List-vs-grid.png\",\"datePublished\":\"2021-06-17T06:00:07+00:00\",\"dateModified\":\"2023-01-20T13:25:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"description\":\"List view and grid view for mobile user experience design. Many designers use grid view because it's more appealing to the eye.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/List-vs-grid.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/List-vs-grid.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobile-ux-design-listview-and-gridview\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile UX Design -ListView, GridView and Gradient\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile UX Design -ListView, GridView and Gradient","description":"List view and grid view for mobile user experience design. Many designers use grid view because it's more appealing to the eye.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/","og_locale":"en_US","og_type":"article","og_title":"Mobile UX Design -ListView, GridView and Gradient","og_description":"List view and grid view for mobile user experience design. Many designers use grid view because it's more appealing to the eye.","og_url":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-06-17T06:00:07+00:00","article_modified_time":"2023-01-20T13:25:00+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/06\/List-vs-grid.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Mobile UX Design -ListView, GridView and Gradient","datePublished":"2021-06-17T06:00:07+00:00","dateModified":"2023-01-20T13:25:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/"},"wordCount":713,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/06\/List-vs-grid.png","keywords":["Gradient","GridView","GridView and Gradient","ListView","Mobile UX Design","UX Design"],"articleSection":["UX Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/","url":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/","name":"Mobile UX Design -ListView, GridView and Gradient","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/06\/List-vs-grid.png","datePublished":"2021-06-17T06:00:07+00:00","dateModified":"2023-01-20T13:25:00+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"description":"List view and grid view for mobile user experience design. Many designers use grid view because it's more appealing to the eye.","breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/06\/List-vs-grid.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/06\/List-vs-grid.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/mobile-ux-design-listview-and-gridview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile UX Design -ListView, GridView and Gradient"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6843"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6843\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6844"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}