Stack Layout Shadow Background In Flutter

Stack Layout Shadow Background In Flutter :

Stack Layout Shadow Background Image :

Stack Layout Shadow Background Image :

Stack Layout Shadow Background.dart

Stack(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              height: 350,
              child: Image(
                image: AssetImage(
                  'assets/images/schlisting.png',
                ),
                height: 350,
                fit: BoxFit.cover,
              ),
            ),
            Positioned(
              bottom: 0,
              child: Container(
                height: MediaQuery.of(context).size.height * 0.4,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        stops: [
                          0.1,
                          0.2,
                          0.4,
                          0.7,
                        ],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Color(0xCC000000).withOpacity(0.0),
                          Color(0xCC000000).withOpacity(0.2),
                          Color(0xCC000000).withOpacity(0.4),
                          Color(0xCC000000).withOpacity(0.6),
                        ])),
              ),
            ),
            Positioned(
              bottom: 20,
              child: Container(
                margin: EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(bottom: 12),
                      child: Row(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(right: 5),
                            child: Icon(
                              Icons.access_time,
                              color: Colors.white,
                              size: 14,
                            ),
                          ),
                          Text(
                            'DUE:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 12,
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(bottom: 12),
                      width: MediaQuery.of(context).size.width * 0.80,
                      child: Text(
                        'Title',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(bottom: 12),
                      child: Text(
                        'Time Go',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      ),
                    ),
                    Container(
                      width: MediaQuery.of(context).size.width,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Container(
                            child: Row(
                              children: <Widget>[
                                Container(
                                  margin: EdgeInsets.only(right: 5),
                                  child: Icon(
                                    FontAwesomeIcons.commentAlt,
                                    color: Colors.white,
                                    size: 14,
                                  ),
                                ),
                                Text(
                                  'No comments',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 12,
                                  ),
                                )
                              ],
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(10),
                            margin: EdgeInsets.only(right: 40),
                            child: RotationTransition(
                              turns: AlwaysStoppedAnimation(45 / 360),
                              child: Icon(
                                FontAwesomeIcons.thumbtack,
                                color: Colors.grey[400],
                                size: 14,
                              ),
                            ),
                            decoration: BoxDecoration(
                                shape: BoxShape.circle, color: Colors.white),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        )

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