Trying to create stories in fluttter

0

Good day, I am trying to build a row to show stories in a project am working on, i used the flutter Instagram stories package for it but i want to add a add stories button before the flutter Instagram stories so a user can easily add stories by clicking it.

ListView(
        physics: const AlwaysScrollableScrollPhysics(),
        children: <Widget>[
          // Container(
          //   width: double.infinity,
          //   height: 100.0,
          //   child: ListView.builder(
          //     scrollDirection: Axis.horizontal,
          //     itemCount: stories.length + 1,
          //     itemBuilder: (BuildContext context, int index) {
          //       if (index == 0) {
          //         return const SizedBox(width: 10.0);
          //       }
          //       return Container(
          //         margin: const EdgeInsets.all(10.0),
          //         width: 60.0,
          //         height: 60.0,
          //         decoration: const BoxDecoration(
          //           shape: BoxShape.circle,
          //         ),
          //         child: CircleAvatar(
          //           child: ClipOval(
          //             child: Image(
          //               height: 60.0,
          //               width: 60.0,
          //               image: AssetImage(stories[index - 1]),
          //               fit: BoxFit.cover,
          //             ),
          //           ),
          //         ),
          //       );
          //     },
          //   ),
          // ),

          //stories implementation
          Column(
            children: <Widget>[
              FlutterInstagramStories(
                collectionDbName: collectionDbName,
                // showTitleOnIcon: true,
                backFromStories: () {
                  _backFromStoriesAlert();
                },
                iconTextStyle: TextStyle(
                  fontSize: 14.0,
                  color: Colors.white,
                ),
                iconImageBorderRadius: BorderRadius.circular(50.0),
                iconBoxDecoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(50.0)),
                  color: Colors.grey, //(0xFFffffff),
                ),
                iconWidth: getProportionateScreenHeight(50),
                iconHeight: getProportionateScreenHeight(50),
                textInIconPadding:
                    EdgeInsets.only(left: 8.0, right: 8.0, bottom: 12.0),
                //how long story lasts in seconds
                imageStoryDuration: 7,
                progressPosition: ProgressPosition.top,
                repeat: true,
                inline: false,
                languageCode: 'en',
                backgroundColorBetweenStories: Colors.black,
                closeButtonIcon: Icon(
                  Icons.close,
                  color: Colors.white,
                  size: 28.0,
                ),
                closeButtonBackgroundColor: Color(0x11000000),
                sortingOrderDesc: true,
                // lastIconHighlight: true,
                // lastIconHighlightColor: Colors.green,
                // lastIconHighlightRadius: const Radius.circular(50.0),
                // captionTextStyle: TextStyle(
                //   fontSize: 22,
                //   color: Colors.white,
                // ),
                captionMargin: EdgeInsets.only(
                  bottom: 50,
                ),
                captionPadding: EdgeInsets.symmetric(
                  horizontal: 24,
                  vertical: 8,
                ),
              ),
            ],
          ),

          const Divider(),
          _buildPost(0),
          _buildPost(1),
        ],
      ),
    );
  }

am trying to add this and i want to change the column to row but when i change it every thing else on the screen will no longer be visible

Stack(
        alignment: Alignment.bottomRight,
        children: [
          Container(
            width: 60.0,
            height: 60.0,
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  fit: BoxFit.fill,
                  image:NetworkImage(''),
                )
            ),
            margin: const EdgeInsets.symmetric(horizontal: 8.0),
          ),
        Positioned(
            right: 10.0,
            child: CircleAvatar(
              backgroundColor: Colors.blueAccent,
              radius: 10.0,
              child: Icon(Icons.add,size: 14.0,
                color: Colors.white,),
            ),
          )
        ],
      ),
flutter
flutter-dependencies
asked on Stack Overflow Feb 16, 2021 by Blessing

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0