Mobile UX Design -ListView, GridView and Gradient

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  is 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

There are four-way to create a ListView

  1. Using Default Constructor
  2. Using ListView.builder 
  3. Using ListView .separated
  4. Using ListView.custom

ListView Creation using default constructor:——-

It takes a list of children of the widget

ListView(

List<Children>(    )

);

This is efficient when you have a limited number of a child because all item preloaded in memory 

ListView( padding: const EdgeInsets.all(8),

 children: <Widget>[ Container( 

height: 50,

 color: Colors.amber[600],

 child: const Center(child: Text('Entry A')), ),

 Container( height: 50, color: Colors.amber[500],

 child: const Center(child: Text('Entry B')), ),

 Container( height: 50, color: Colors.amber[100], 

child: const Center(child: Text('Entry C')

),

 ),

 ],

 )

ListView Creation Using ListView.builder:——-

ListView.builder constructor takes indexedwidgetBuilder which build child dynamically

ListView.builder(

Itemcount:listofchild.size,

itemBuilder:(context,index){

Return ListTile(

title:Text(“Hi this is title”);

)

}

)

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

ListView.builder(

  padding: const EdgeInsets.all(8),

  itemCount: entries.length,

  itemBuilder: (BuildContext context, int index) {

    return Container(

      height: 50,

      color: Colors.amber[colorCodes[index]],

      child: Center(child: Text('Entry ${entries[index]}')),

    );

  }

);

ListView Creation Using ListView .separated:——

ListView.separated constructor takes two parameter 

  1. indexWidgetBuilder:itemBuilder
  2. separaterBuilder

site builder build child on demand and separaterBuilder build separate between the child 

ListView.separated(

  padding: const EdgeInsets.all(8),

  itemCount: entries.length,

  itemBuilder: (BuildContext context, int index) {

    return Container(

      height: 50,

      color: Colors.amber[colorCodes[index]],

      child: Center(child: Text('Entry ${entries[index]}')),

    );

  },

  separatorBuilder: (BuildContext context, int index) => const Divider(),

);

ListView Creation using ListView.custom:——-

Listview, the custom constructor takes silver child delegate which provides the ability to create a custom child model

ListView(

  shrinkWrap: true,

  padding: const EdgeInsets.all(20.0),

  children: const <Widget>[

    Text("I'm dedicating every day to you"),

    Text('Domestic life was never quite my style'),

    Text('When you smile, you knock me out, I fall apart'),

    Text('And I thought I was so smart'),

  ],

)

Child element lifecycle:——

  1. Creation
  2. Destruction

Creation:-

When the child displaying on the screen, called the creation phase

Destruction:-

When a child scrolling out of view it automatically destroys and erases from memory

GridView

GridView is a widget in a flutter that used to display the element one after another or we can say  that GridView is used to display the child in 2-D Array 

GridView can implement in a various way:—

  1. Using count 
  2. Using builder
  3. Using extent

Using GridView.count()

GridView.count is commonly used way because we have known child-size so developer know about the number of row and column 

Parameters of GridView.count()

  1. crossAxisCount: it is used to declare the number of column in the view 
  2. crossAxisSpacing:- it is used to declare the spacing the between child listed in cross-axis 
  3. mainaxisspacing:- it is used to declare the spacing the between child listed in the main axis 
  4. scrollDirection:- is used to define the scrolling direction of child
  5. reverse:-it reverse the list in the opposite direction
  6. physics:-it used to determine how list behave when we reach start to end 

Example;-

GridView.count(  

                crossAxisCount: 3,  

                crossAxisSpacing: 4.0,  

                mainAxisSpacing: 8.0,  

                children: List.generate(choices.length, (index) {  

                  return Center(  

                    child: SelectCard(choice: choices[index]),  

                  );

GridView.builder()——

GridView.builder comes in role when we have large amount of data. the GridView.builder() construct takes SliverGridDelegateWithFixedCrossAxisCount and SliverGridDelegateWithMaxCrossAxisExtent

The common attribute used 

Itemcount:-the number of child you want to display 

gridDelegate:- it determines the grid, its argument should not be null 

itemBuilder:-it is used to create the item that will be displayed on the screen

Note :-t will be called only when the indices >= zero && indices < itemCount.

GridView.builder(  

              itemCount: images.length,  

              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  

                  crossAxisCount: 2,  

                  crossAxisSpacing: 4.0,  

                  mainAxisSpacing: 4.0  

              ),  

              itemBuilder: (BuildContext context, int index){  

                return Image.network(images[index]);  

              },  

            )),  

      ),  

    );

GridView.extent()—–

GridView.extent() is used to customize the view with custom  extent means each tile has maximum tile extent

GridView.extent(  

            primary: false,  

            padding: const EdgeInsets.all(16),  

            crossAxisSpacing: 10,  

            mainAxisSpacing: 10,  

            maxCrossAxisExtent: 200.0,  

            children: <Widget>[  

              Container(  

                padding: const EdgeInsets.all(8),  

                child: const Text('First', style: TextStyle(fontSize: 20)),  

                color: Colors.yellow,  

              ),  

          
              Container(  

                padding: const EdgeInsets.all(8),  

                child: const Text('Four', style: TextStyle(fontSize: 20)),  

                color: Colors.yellow,  

              ),  

              Container(  

                padding: const EdgeInsets.all(8),  

                child: const Text('Fifth', style: TextStyle(fontSize: 20)),  

                color: Colors.yellow,  

              ),  

              Container(  

                padding: const EdgeInsets.all(8),  

                child: const Text('Six', style: TextStyle(fontSize: 20)),  

                color: Colors.blue,  

              ),  

            ],  

          )),  

    );

Linear Gradient

Linear gradient as per name this gradient flows over a simple linear stretch. Over this stretch is a smooth color transition, This  is  used in BoxDecoration for decoration of child, it consists of two main parameters as

  1. Begin       value lie between 0.0 and 1.0
  2. End          value lies between 0.0 and 1.0

Note:- the value is infraction so the same gradient use for varying sized boxes without changing the parameter.

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.

Example:-

BorderRadius.circular(15),
splashColor: Theme.of(context).primaryColor,

child: Container(padding: EdgeInsets.all(15),
  child: Text(title),
  decoration: BoxDecoration(

    gradient: LinearGradient(colors: [color.withOpacity(.7),color.withOpacity(.5)],
    begin:Alignment.topLeft,
    end:Alignment.bottomRight ),
    borderRadius: BorderRadius.circular(15)
  ),

Radial Gradient:—

This is another very important key for designing, This type of gradient changes its color with respect to the center point.

Container(

  decoration: BoxDecoration(

      gradient: RadialGradient(

        colors: [Colors.yellow, Colors.deepPurple],

        // Add one stop for each color 

                 // Values should increase from 0.0 to 1.0

                 stops: [0.1, 0.5, 0.75]

    ),

  ),

),

Like linear-gradient, color class contain at least two-color, and values should lie between 0.0 and 1.0

 

Leave a Reply