Stack UI In Flutter

Stack UI In Flutter :

Stack UI In Flutter : Today i will show you how to create stack ui in flutter also give the information of the stack with an example

stack allows us to make multiple widgets which is overlay to each other.using stack you can design cool layout

there are two types of stack

  • IndexedStack
  • Stack

IndexedStack :

An IndexedStack is a stack where only one element is displayed at one time by its index. it takes the children in the stack but it display one child at a time.

When we wrap the same elements with IndexedStack and give it the index 0, it shows the bottommost child.

Stack :

using stack you can put multiple widgets in the single screen.it takes multiple children and order them in the form of bottom to top so the last item is the topmost and the first item is the bottom most

the size of the stack is depend on the largest member of the stack

each member of the stack ui in flutter needs the alignment and the position

There are also other types of Positioned. A few of them are:

Positioned.fill()

Sets top, right, bottom, left to 0.0 by default unless overriden. Hence, it fills the screen by default since distance from all four sides is 0.0.

Positioned.fromRect()

Creates a Positioned object from a given Rect.

Now i am going to show you the example of stack ui in flutter

Stack UI Image

Stack UI In Flutter

Stack UI.dart

Stack(
      children: <Widget>[
        Column(
          children: <Widget>[
            Image.network(
              "https://www.visitnewportbeach.com/wp-content/uploads/2018/04/star700x400-700x400.jpg",
              fit: BoxFit.cover,
              width: double.infinity,
              height: 200.0,
            ),
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(16.0),
              color: Colors.blue,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "Starbucks Coffe",
                    style: TextStyle(color: Colors.white, fontSize: 24),
                  ),
                  Text(
                    "Coffe Shop",
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(16.0),
              child: RaisedButton(
                onPressed: () {
                  FeatureDiscovery.discoverFeatures(
                      context, [feature1, feature2, feature3, feature4]);
                },
                child: Text('Starting'),
              ),
            )
          ],
        ),
        Positioned(
          top: 200,
          right: 0,
          child: FractionalTranslation(
            translation: Offset(-0.5, -0.5),
            child: DescribedFeatureOverlay(
              featureId: feature4,
              icon: Icons.drive_eta,
              color: Colors.blue,
              title: "The title",
              description: "The description",
              child: FloatingActionButton(
                onPressed: () {},
                backgroundColor: Colors.white,
                foregroundColor: Colors.blue,
                child: Icon(Icons.drive_eta),
              ),
            ),
          ),
        ),
      ],
    )

Item UI Image :

Stack UI In Flutter

Item UI.dart

  Widget _buildListItem(String imgPath, String foodName, String price) {
    return InkWell(
      onTap: () {
        Navigator.of(context).push((MaterialPageRoute(
          builder: (context) => DetailsPage(heroTag: imgPath, foodName: foodName, foodPrice: price)
        )));
      },
      child: Padding(
        padding: EdgeInsets.only(left: 20.0, top: 10.0, bottom: 10.0),
        child: Container(
          height: 200.0,
          width: 200.0,
          decoration: BoxDecoration(
            color: Colors.white,
                borderRadius: BorderRadius.circular(10.0),
                boxShadow: [
                  BoxShadow(
                      blurRadius: 6.0,
                      color: Colors.grey.withOpacity(0.2),
                      spreadRadius: 5.0)
                ]),
          child: Stack(
            children: <Widget>[
              Container(
                height: 175.0,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.white, Color(0xFFACBEA3)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight
                  ),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    topRight: Radius.circular(10.0)
                  )
                )
              ),
              Hero(
                tag: imgPath,
                child: Container(
                  height: 175.0,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(imgPath),
                      fit: BoxFit.contain
                    ),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10.0),
                      topRight: Radius.circular(10.0)
                    )
                  ),
                )
              ),
              Positioned(
                top: 160.0,
                right: 20.0,
                child: Material(
                  elevation: 2.0,
                  borderRadius: BorderRadius.circular(15.0),
                  child: Container(
                    height: 30.0,
                    width: 30.0,
                    child: Center(
                      child: Icon(Icons.favorite, color: Colors.red, size: 17.0)
                    ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15.0),
                      color: Colors.white
                    ),
                  )
                )
              ),
              Positioned(
                top: 190.0,
                left: 10.0,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(foodName,
                      style: TextStyle(
                              fontFamily: 'Montserrat',
                              fontWeight: FontWeight.w600,
                              color: Colors.black,
                              fontSize: 14.0)),
                    SizedBox(height: 3.0),
                    Container(
                      width: 175.0,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              Text(
                                      '4.9',
                                      style: TextStyle(
                                          fontFamily: 'Montserrat',
                                          color: Colors.grey,
                                          fontSize: 12.0),
                                    ),
                              SizedBox(width: 3.0),
                                Icon(Icons.star,
                                    color: Colors.green, size: 14.0),
                                Icon(Icons.star,
                                    color: Colors.green, size: 14.0),
                                Icon(Icons.star,
                                    color: Colors.green, size: 14.0),
                                Icon(Icons.star,
                                    color: Colors.green, size: 14.0),
                                Icon(Icons.star,
                                    color: Colors.green, size: 14.0),
                            ],
                          ),
                          Text(price,
                                style: TextStyle(
                                    fontFamily: 'Montserrat',
                                    fontWeight: FontWeight.w500,
                                    color: Colors.black,
                                    fontSize: 16.0)),      
                        ],
                      )
                    )
                  ],
                )
              )
            ],
          )
        )
      )
    );
  }

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in