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,),
),
)
],
),
User contributions licensed under CC BY-SA 3.0