NavigationBar is imported from both 'package:flutter/src/material/navigation_bar.dart' and 'package:flutter_onboarding_slider/navigation_bar.dart' - flutter

**i am facing error while running error is this because of packges or something else i have remove all the old code and add new still facing following error.
Error: 'NavigationBar' is imported from both 'package:flutter/src/material/navigation_bar.dart' and 'package:flutter_onboarding_slider/navigation_bar.dart'.
appBar: NavigationBar(
^^^^^^^^^^^^^
: Warning: Operand of null-aware operation '?.' has type 'GoogleMapController' which excludes null.
lib/…/map/map.dart:62
'GoogleMapController' is from 'package:google_maps_flutter/google_maps_flutter.dart' ('/D:/flutter/.pub-cache/hosted/pub.dartlang.org/google_maps_flutter-2.1.7/lib/google_maps_flutter.dart').
package:google_maps_flutter/google_maps_flutter.dart:1
_controller?.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
^
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_onboarding_slider/flutter_onboarding_slider.dart';
import 'package:fyppedometer/mainScreens/Navigation/navigationBar.dart';
import 'package:fyppedometer/widgets/constants.dart';
import 'package:fyppedometer/widgets/text.dart';
class MyHome extends StatefulWidget {
const MyHome({Key? key}) : super(key: key);
#override
State<MyHome> createState() => _MyHomeState();
}
class _MyHomeState extends State {
final Color kDarkBlueColor = Colors.cyan;
// ignore: non_constant_identifier_names
List<String> numbers_Height = [
for (var i = 1.1; i <= 10.0; i = i + 0.1) i.toString()
];
// ignore: non_constant_identifier_names
List<String> numbers_Weight = [for (var i = 1; i <= 1000; i++) i.toString()];
int _groupValue = -1;
String _selectedGender = 'male';
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
// color: Colors.amber,
child: OnBoardingSlider(
buttonText: 'Start',
onFinish: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => Navbar(),
),
);
},
buttonTextColor: Colors.cyan,
// skipTextButton: Text(
// 'Skip',
// style: TextStyle(
// fontSize: 16,
// color: kDarkBlueColor,
// fontWeight: FontWeight.w600,
// ),
// ),
// trailing: Text(
// 'Login',
// style: TextStyle(
// fontSize: 16,
// color: kDarkBlueColor,
// fontWeight: FontWeight.w600,
// ),
// ),
// trailingFunction: () {
// // Navigator.push(
// // context,
// // CupertinoPageRoute(
// // builder: (context) => LoginPage(),
// // ),
// // );
// },
controllerColor: kDarkBlueColor,
totalPage: 3,
headerBackgroundColor: liteblue,
pageBackgroundColor: liteblue,
background: [
Padding(
padding: const EdgeInsets.only(top: 210, left: 80),
child: Image.asset(
'assets/gender.png',
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.6,
),
),
Padding(
padding: const EdgeInsets.only(top: 160, left: 60),
child: Image.asset(
'assets/walking.png',
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width * 0.7,
),
),
Padding(
padding: const EdgeInsets.only(top: 200, left: 60),
child: Image.asset(
'assets/human.png',
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.6,
),
),
],
speed: 1.8,
pageBodies: [
Container(
// padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Text(
'What’s Your Gender',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 10,
),
const Text(
'Calories & Stride length calculation need it ',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white60,
fontSize: 21.0,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: size.height * 0.1,
width: size.width * 0.5,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(25), // radius of 10
color: Color.fromARGB(255, 19, 65, 103),
),
child: Center(
child: ListTile(
leading: Radio<String>(
activeColor: Colors.white,
value: 'male',
groupValue: _selectedGender,
onChanged: (value) {
setState(() {
_selectedGender = value!;
});
},
),
title: text(
textData: "Male",
color: Colors.white,
fontsize: 20.0,
fontweight: FontWeight.bold),
// Text(_selectedGender == 'male' ? 'Hello gentlement!' : 'Hi lady!')
),
),
),
SizedBox(height: 20),
Container(
height: size.height * 0.1,
width: size.width * 0.5,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(25), // radius of 10
color: Color.fromARGB(255, 19, 65, 103),
),
child: Center(
child: ListTile(
leading: Radio<String>(
activeColor: Colors.white,
value: 'female',
groupValue: _selectedGender,
onChanged: (value) {
setState(() {
_selectedGender = value!;
});
},
),
title: text(
textData: "Female",
color: Colors.white,
fontsize: 20.0,
fontweight: FontWeight.bold),
// Text(_selectedGender == 'male' ? 'Hello gentlement!' : 'Hi lady!')
),
),
),
],
)
]),
),
Container(
// padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Text(
'How Tall are you?',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 10,
),
const Text(
'To Personalize Your Fitness Goal ',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white60,
fontSize: 20.0,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Container(
height: size.height * 0.10,
width: size.width * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: Color.fromARGB(255, 145, 174, 225))),
child: Center(
child: text(
textData: "Height",
fontsize: 30.0,
fontweight: FontWeight.bold,
color: Color.fromARGB(255, 147, 148, 152)),
),
),
),
SizedBox(
height: 30,
),
Center(
child: Container(
height: size.height * 0.13,
width: size.width * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Color.fromARGB(255, 92, 89, 89)),
// color: Colors.white,
),
child: ListWheelScrollView.useDelegate(
itemExtent: 100,
// controller: fixedExtentScrollController,
physics: FixedExtentScrollPhysics(),
onSelectedItemChanged: (i) {
print(numbers_Height[i]);
},
childDelegate: ListWheelChildLoopingListDelegate(
children: <Widget>[
...numbers_Height.map((String number) {
return Center(
child: Text(
number,
style: const TextStyle(
fontSize: 28.0,
color: Colors.white,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.normal,
decoration: TextDecoration.none),
),
);
})
],
),
),
),
)
],
)
]),
),
Container(
// padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Text(
'How much do you Weight?',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 10,
),
const Text(
'To Personalize Your Fitness Goal ',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white60,
fontSize: 20.0,
fontWeight: FontWeight.w600,
),
),
const SizedBox(
height: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Container(
height: size.height * 0.10,
width: size.width * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: Color.fromARGB(255, 145, 174, 225))),
child: Center(
child: text(
textData: "Weight",
fontsize: 30.0,
fontweight: FontWeight.bold,
color: Color.fromARGB(255, 147, 148, 152)),
),
),
),
SizedBox(
height: 30,
),
Center(
child: Container(
height: size.height * 0.13,
width: size.width * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Color.fromARGB(255, 92, 89, 89)),
),
child: ListWheelScrollView.useDelegate(
itemExtent: 100,
physics: FixedExtentScrollPhysics(),
onSelectedItemChanged: (i) {
print(numbers_Weight[i]);
},
childDelegate: ListWheelChildLoopingListDelegate(
children: <Widget>[
...numbers_Weight.map((String number) {
return Center(
child: Text(
number, //Here is the child value I would like to get
style: const TextStyle(
fontSize: 28.0,
color: Colors.white,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.normal,
decoration: TextDecoration.none),
),
);
})
],
),
),
),
)
],
)
]),
),
],
),
);
}
}

Use show and hide to import part of a library.
// Import only foo.
import 'package:lib1/lib1.dart' show foo;
// Import all names EXCEPT foo.
import 'package:lib2/lib2.dart' hide foo;
See Using libraries for details.

Related

Flutter ; Vertical ListView inside a column(inside another column) causing an overflow

class Episodes extends StatefulWidget {
const Episodes({super.key});
#override
State<Episodes> createState() => _EpisodesState();
}
class _EpisodesState extends State<Episodes> {
final seasons = ['Season 1', 'Season 2', 'Season 3'];
String? value;
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
//EdgeInsets.only(left: size.width * 0.03, right: size.width * 0.03),
return SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
children: [
Container(
height: size.height * 0.045,
width: size.width * 0.25,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.25),
borderRadius: BorderRadius.circular(5)),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: value,
alignment: Alignment.center,
isExpanded: true,
//icon: Icon(Icons.arrow_drop_down_outlined,
// size: 12, color: Colors.white),
iconEnabledColor: Colors.white,
//dropdownColor: Colors.transparent,
items: seasons.map(buildMenuItem).toList(),
dropdownColor: Colors.grey.withOpacity(0.3),
onChanged: (value) => setState(() {
this.value = value;
}),
),
),
),
SizedBox(height: size.height * 0.02),
ListView.builder(
shrinkWrap: true,
//physics: const AlwaysScrollableScrollPhysics(),
itemCount: 15,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Container(
color: Colors.red,
height: 15,
width: 15,
),
);
},
),
],
),
);
}
DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
value: item,
child: Center(
child: Text(
item,
style: GoogleFonts.poppins(color: Colors.white, fontSize: 12),
),
));
}
Im trying to build a netflix clone, and this is the design of the episode list in the title page.
Basically, im trying to include listview.builder(vertical) inside a column; but im getting an overflow error.
This column is furthur getting returned as one of the children of a parent column in another file.
Till now ive tried wrapping the column under :
*SingleChildScrollView,
*Expanded
*SizedBox, Container : with fixed height
None of the above worked; i even tried playing around with the scroll physics, didnt work, the overflow error still persisted.
Im new to flutter; i just wanna get rid of the overflow error. Any help will be appreciated!
Furthur im looking to dynamically fetch details from firebase and display them here. Any tips on that will be appreciated as well!
Main file structure :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:netflixclone/ContentPages/tabbar_pg.dart';
import 'package:video_player/video_player.dart';
//UpperNavBar
//video preview
//Container
//Name
//{List of particulars}
//Play Btn
//Download Btn
//Description
//Strarring
//creator
//Row List : List, Rate, Share, Download S1.
//Tab Bar : Episodes, TrailersNMore, MoreLikeThis
//DropDownList : Seasons list
//Episodes : E1 : Container :{}..
//TrailersNMore : Vidoes
//MoreLikeThis : 9 random suggestions. : if i can ill do.
class TitlePage extends StatefulWidget {
const TitlePage({super.key});
#override
State<TitlePage> createState() => _TitlePageState();
}
class _TitlePageState extends State<TitlePage> {
int current = 0;
#override
Widget build(BuildContext context) {
List<String> items = [
"EPISODES",
"TRAILERS & MORE",
"MORE LIKE THIS",
];
List<Widget> itemsPages = [
Episodes(),
TrailersNMore(),
MoreLikeThis(),
];
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(size.height * 0.05),
child: UpperAppBar(),
),
backgroundColor: Colors.black,
body: Padding(
padding: EdgeInsets.only(top: size.height * 0.007),
child: Column(
children: [
Container(child: VideoController()),
Container(
child: Padding(
padding: EdgeInsets.only(
left: size.width * 0.02,
top: size.height * 0.01,
right: size.width * 0.02),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Peaky Blinders",
style: GoogleFonts.comfortaa(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w900)),
Padding(
padding: EdgeInsets.only(top: size.height * 0.008),
child: Row(
children: [
Text("2022",
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.99),
fontSize: 16,
fontWeight: FontWeight.w500)),
SizedBox(width: size.width * 0.03),
Container(
width: size.width * 0.033,
height: size.height * 0.024,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)),
child: Center(
child: Text("A",
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.99),
fontSize: 16,
fontWeight: FontWeight.w500)),
),
),
SizedBox(width: size.width * 0.03),
Text("6-Seasons",
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.99),
fontSize: 16,
fontWeight: FontWeight.w500)),
SizedBox(width: size.width * 0.03),
Icon(Icons.comment_rounded,
size: 25, color: Colors.white.withOpacity(0.8))
],
),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.white),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
),
fixedSize: MaterialStateProperty.all<Size>(
Size.fromWidth(size.width))),
onPressed: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.play_arrow,
color: Colors.black,
size: 22,
),
SizedBox(width: size.width * 0.01),
Text('Play',
style: GoogleFonts.poppins(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold))
]),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Colors.grey.withOpacity(0.25)),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
),
fixedSize: MaterialStateProperty.all<Size>(
Size.fromWidth(size.width))),
onPressed: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.download_outlined,
color: Colors.white,
size: 20,
),
SizedBox(width: size.width * 0.01),
Text('Download',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold)),
SizedBox(width: size.width * 0.01),
Text('S1:E1',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold)),
]),
),
Text(
'A notorious gang in 1919 Birminham, England, is led by the fierce Tommy Shelby, a crime boss set on moving up in the world no matter the cost.',
style: GoogleFonts.poppins(
color: Colors.white, fontSize: 12),
),
SizedBox(height: size.height * 0.01),
Row(
children: [
Text(
'Starring: ',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.99),
fontSize: 12),
),
Text(
'Cillian Murphy,Sam Neill, Helen McCory',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.7),
fontSize: 12),
),
GestureDetector(
onTap: () => null,
child: Text(
'...more',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.99),
fontSize: 12),
),
),
],
),
Row(
children: [
Text(
'Creator: ',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.99),
fontSize: 12),
),
Text(
'Steven Knight',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.7),
fontSize: 12),
),
],
),
SizedBox(height: size.height * 0.01),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.check,
color: Colors.white,
size: 30,
)),
Text(
'My List',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.7),
fontSize: 10),
)
],
),
),
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.thumb_up_alt_outlined,
color: Colors.white,
size: 30,
)),
Text(
'Rate',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.7),
fontSize: 10),
)
],
),
),
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.share,
color: Colors.white,
size: 30,
)),
Text(
'Share',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.7),
fontSize: 10),
)
],
),
),
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.download_rounded,
color: Colors.white,
size: 30,
)),
Text(
'Download Season 1',
style: GoogleFonts.poppins(
color: Colors.grey.withOpacity(0.7),
fontSize: 10),
)
],
),
),
],
)
],
),
),
),
Divider(
height: size.height * 0.01,
),
Container(
color: Colors.grey.withOpacity(0.7),
height: size.height * 0.002,
),
//TabBar :
Padding(
padding: EdgeInsets.only(
left: size.width * 0.03, right: size.width * 0.03),
child: SizedBox(
width: double.infinity,
height: 60,
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: items.length,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, index) {
return GestureDetector(
onTap: () => setState(() {
current = index;
}),
child: Padding(
padding: EdgeInsets.only(right: size.width * 0.1),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
decoration: BoxDecoration(
border: current == index
? Border(
top: BorderSide(
color: Color.fromARGB(255, 225, 26, 12),
width: size.height * 0.005),
)
: Border(
top: BorderSide(
color: Colors.black,
width: size.height * 0.005),
),
),
child: Text(items[index],
style: GoogleFonts.bebasNeue(
fontSize: 22,
fontWeight: FontWeight.w500,
color: current == index
? Colors.white
: Colors.grey.withOpacity(0.99))),
),
),
);
},
),
),
),
itemsPages[current],
//Episodes()
// Container(
// width: double.infinity,
// child: itemsPages[current],
// ),
],
),
),
);
}
Widget UpperAppBar() {
return AppBar(
backgroundColor: Colors.black,
leading: Icon(
Icons.arrow_back,
color: Colors.white,
size: 30,
),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
size: 30,
),
onPressed: null,
),
IconButton(
icon: Image.asset('assets/Images/ProfileImg.jpg', width: 30),
onPressed: null,
)
],
);
}
}
class VideoController extends StatefulWidget {
const VideoController({super.key});
#override
State<VideoController> createState() => _VideoPlayerState();
}
class _VideoPlayerState extends State<VideoController> {
late VideoPlayerController controller;
final asset = 'assets/Videos/SoClose-ThomasShelby.mp4';
#override
void initState() {
super.initState();
controller = VideoPlayerController.asset(asset)
..addListener(() => setState(() {}))
..setLooping(
true) //if u can after vid finishes : pause it and add a peaky blinders logo
..initialize().then((_) => controller.play());
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
final isMuted = controller.value.volume == 0;
return Stack(children: [
VideoPlayerWidget(controller: controller),
if (controller != null && controller.value.isInitialized)
Positioned(
top: size.height * 0.185,
left: size.width * 0.85,
child: IconButton(
icon: Icon(
isMuted ? Icons.volume_off : Icons.volume_up,
color: Colors.white,
size: 20,
),
onPressed: () => controller.setVolume(isMuted ? 1 : 0),
),
),
Positioned(
top: size.height * 0.205,
left: size.width * 0.02,
child: Container(
width: size.width * 0.16,
height: size.height * 0.026,
decoration: BoxDecoration(color: Colors.black.withOpacity(0.39)),
child: Center(
child: Text('Preview',
style: GoogleFonts.ptSans(color: Colors.white, fontSize: 15)),
),
),
)
]);
}
}
class VideoPlayerWidget extends StatelessWidget {
final VideoPlayerController controller;
const VideoPlayerWidget({
Key? key,
required this.controller,
}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return controller != null && controller.value.isInitialized
? Container(
alignment: Alignment.topCenter,
child: buildVideo(),
)
: Container(
height: 100,
child: Center(child: CircularProgressIndicator()),
);
}
Widget buildVideo() => Stack(children: <Widget>[
buildVideoPlayer(),
Positioned.fill(child: BasicOverlayWidget(controller: controller)),
]);
Widget buildVideoPlayer() => AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: VideoPlayer(controller));
}
class BasicOverlayWidget extends StatelessWidget {
final VideoPlayerController controller;
const BasicOverlayWidget({
Key? key,
required this.controller,
}) : super(key: key);
#override
Widget build(BuildContext context) => GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () =>
controller.value.isPlaying ? controller.pause() : controller.play(),
child: Stack(
children: <Widget>[
buildPlay(),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: buildIndicator(),
),
],
),
);
Widget buildIndicator() => VideoProgressIndicator(
controller,
allowScrubbing: true,
colors: VideoProgressColors(
backgroundColor: Color.fromARGB(255, 115, 11, 3),
playedColor: Color.fromARGB(255, 225, 26, 12)),
);
Widget buildPlay() => controller.value.isPlaying
? Container()
: Container(
alignment: Alignment.center,
color: Colors.black26,
child: Icon(Icons.play_arrow, color: Colors.white, size: 80),
);
}
From what i understand you have something like this on the main page:
Column(children : [
SomeWidget(),
OtherWidget(),
Episodes(),
]);
Since Episodes() is in Column, it's been given infinite height. You should wrap it in an Expanded() widget if you want it to get the remaining height of the page, like below.
Column(children : [
SomeWidget(),
OtherWidget(),
Expanded(child:Episodes()),
]);
If this doesn't fix your problem, please give more informations about the parent widget (where Episodes is used).
The scaffold wrapper was missing and I fixed it
I added Area to prevent the height of the MenuItem popup from exceeding the top of the screen
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class Episodes extends StatefulWidget {
const Episodes({super.key});
#override
State<Episodes> createState() => _EpisodesState();
}
class _EpisodesState extends State<Episodes> {
final seasons = ['Season 1', 'Season 2', 'Season 3'];
String? value;
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
//EdgeInsets.only(left: size.width * 0.03, right: size.width * 0.03),
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
children: [
Container(
height: size.height * 0.045,
width: size.width * 0.25,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.25),
borderRadius: BorderRadius.circular(5)),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: value,
alignment: Alignment.center,
isExpanded: true,
//icon: Icon(Icons.arrow_drop_down_outlined,
// size: 12, color: Colors.white),
iconEnabledColor: Colors.white,
//dropdownColor: Colors.transparent,
items: seasons.map(buildMenuItem).toList(),
dropdownColor: Colors.grey.withOpacity(0.3),
onChanged: (value) => setState(() {
this.value = value;
}),
),
),
),
SizedBox(height: size.height * 0.02),
ListView.builder(
shrinkWrap: true,
//physics: const AlwaysScrollableScrollPhysics(),
itemCount: 15,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Container(
color: Colors.red,
height: 15,
width: 15,
),
);
},
),
],
),
),
));
}
DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
value: item,
child: Center(
child: Text(
item,
// style: GoogleFonts.poppins(color: Colors.white, fontSize: 12),
),
));
}
//UpperNavBar
//video preview
//Container
//Name
//{List of particulars}
//Play Btn
//Download Btn
//Description
//Strarring
//creator
//Row List : List, Rate, Share, Download S1.
//Tab Bar : Episodes, TrailersNMore, MoreLikeThis
//DropDownList : Seasons list
//Episodes : E1 : Container :{}..
//TrailersNMore : Vidoes
//MoreLikeThis : 9 random suggestions. : if i can ill do.
class TitlePage extends StatefulWidget {
const TitlePage({super.key});
#override
State<TitlePage> createState() => _TitlePageState();
}
class _TitlePageState extends State<TitlePage> {
int current = 0;
#override
Widget build(BuildContext context) {
List<String> items = [
"EPISODES",
"TRAILERS & MORE",
"MORE LIKE THIS",
];
List<Widget> itemsPages = [
Episodes(),
Expanded(
child: Column(
children: [
ListView(
shrinkWrap: true,
children: [
...List.generate(
10,
(index) => ListTile(
title: Text('$index'),
))
],
)
],
),
),
Expanded(
child: Column(
children: [
// TrailersNMore(),
// MoreLikeThis(),
],
))
];
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(size.height * 0.05),
child: UpperAppBar(),
),
backgroundColor: Colors.black,
body: Padding(
padding: EdgeInsets.only(top: size.height * 0.007),
child: Column(
children: [
Container(child: VideoController()),
Container(
child: Padding(
padding: EdgeInsets.only(
left: size.width * 0.02,
top: size.height * 0.01,
right: size.width * 0.02),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Peaky Blinders",
// style: GoogleFonts.comfortaa(
// color: Colors.white,
// fontSize: 30,
// fontWeight: FontWeight.w900),
),
Padding(
padding: EdgeInsets.only(top: size.height * 0.008),
child: Row(
children: [
Text(
"2022",
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.99),
// fontSize: 16,
// fontWeight: FontWeight.w500),
),
SizedBox(width: size.width * 0.03),
Container(
width: size.width * 0.033,
height: size.height * 0.024,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)),
child: Center(
child: Text(
"A",
textAlign: TextAlign.center,
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.99),
// fontSize: 16,
// fontWeight: FontWeight.w500),
),
),
),
SizedBox(width: size.width * 0.03),
Text(
"6-Seasons",
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.99),
// fontSize: 16,
// fontWeight: FontWeight.w500),
),
SizedBox(width: size.width * 0.03),
Icon(Icons.comment_rounded,
size: 25, color: Colors.white.withOpacity(0.8))
],
),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.white),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
),
fixedSize: MaterialStateProperty.all<Size>(
Size.fromWidth(size.width))),
onPressed: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.play_arrow,
color: Colors.black,
size: 22,
),
SizedBox(width: size.width * 0.01),
Text(
'Play',
// style: GoogleFonts.poppins(
// color: Colors.black,
// fontSize: 16,
// fontWeight: FontWeight.bold),
)
]),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Colors.grey.withOpacity(0.25)),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
),
fixedSize: MaterialStateProperty.all<Size>(
Size.fromWidth(size.width))),
onPressed: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.download_outlined,
color: Colors.white,
size: 20,
),
SizedBox(width: size.width * 0.01),
Text(
'Download',
// style: GoogleFonts.poppins(
// color: Colors.white,
// fontSize: 16,
// fontWeight: FontWeight.bold)
),
SizedBox(width: size.width * 0.01),
Text(
'S1:E1',
// style: GoogleFonts.poppins(
// color: Colors.white,
// fontSize: 16,
// fontWeight: FontWeight.bold),
),
]),
),
Text(
'A notorious gang in 1919 Birminham, England, is led by the fierce Tommy Shelby, a crime boss set on moving up in the world no matter the cost.',
// style: GoogleFonts.poppins(
// color: Colors.white, fontSize: 12),
),
SizedBox(height: size.height * 0.01),
Row(
children: [
Text(
'Starring: ',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.99),
// fontSize: 12),
),
Text(
'Cillian Murphy,Sam Neill, Helen McCory',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.7),
// fontSize: 12),
),
GestureDetector(
onTap: () => null,
child: Text(
'...more',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.99),
// fontSize: 12),
),
),
],
),
Row(
children: [
Text(
'Creator: ',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.99),
// fontSize: 12),
),
Text(
'Steven Knight',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.7),
// fontSize: 12),
),
],
),
SizedBox(height: size.height * 0.01),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.check,
color: Colors.white,
size: 30,
)),
Text(
'My List',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.7),
// fontSize: 10),
)
],
),
),
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.thumb_up_alt_outlined,
color: Colors.white,
size: 30,
)),
Text(
'Rate',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.7),
// fontSize: 10),
)
],
),
),
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.share,
color: Colors.white,
size: 30,
)),
Text(
'Share',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.7),
// fontSize: 10),
)
],
),
),
InkWell(
splashColor: Colors.grey.withOpacity(0.8),
child: Column(
children: [
IconButton(
onPressed: () => null,
icon: Icon(
Icons.download_rounded,
color: Colors.white,
size: 30,
)),
Text(
'Download Season 1',
// style: GoogleFonts.poppins(
// color: Colors.grey.withOpacity(0.7),
// fontSize: 10),
)
],
),
),
],
)
],
),
),
),
Divider(
height: size.height * 0.01,
),
Container(
color: Colors.grey.withOpacity(0.7),
height: size.height * 0.002,
),
//TabBar :
Padding(
padding: EdgeInsets.only(
left: size.width * 0.03, right: size.width * 0.03),
child: SizedBox(
width: double.infinity,
height: 60,
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: items.length,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, index) {
return GestureDetector(
onTap: () => setState(() {
current = index;
}),
child: Padding(
padding: EdgeInsets.only(right: size.width * 0.1),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
decoration: BoxDecoration(
border: current == index
? Border(
top: BorderSide(
color: Color.fromARGB(255, 225, 26, 12),
width: size.height * 0.005),
)
: Border(
top: BorderSide(
color: Colors.black,
width: size.height * 0.005),
),
),
child: Text(
items[index],
// style: GoogleFonts.bebasNeue(
// fontSize: 22,
// fontWeight: FontWeight.w500,
// color: current == index
// ? Colors.white
// : Colors.grey.withOpacity(0.99)),
),
),
),
);
},
),
),
),
itemsPages[current],
//Episodes()
// Container(
// width: double.infinity,
// child: itemsPages[current],
// ),
],
),
),
);
}
Widget UpperAppBar() {
return AppBar(
backgroundColor: Colors.black,
leading: Icon(
Icons.arrow_back,
color: Colors.white,
size: 30,
),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
size: 30,
),
onPressed: null,
),
IconButton(
icon: Image.asset('assets/Images/ProfileImg.jpg', width: 30),
onPressed: null,
)
],
);
}
}
class VideoController extends StatefulWidget {
const VideoController({super.key});
#override
State<VideoController> createState() => _VideoPlayerState();
}
class _VideoPlayerState extends State<VideoController> {
late VideoPlayerController controller;
final asset = 'assets/Videos/SoClose-ThomasShelby.mp4';
#override
void initState() {
super.initState();
controller = VideoPlayerController.asset(asset)
..addListener(() => setState(() {}))
..setLooping(
true) //if u can after vid finishes : pause it and add a peaky blinders logo
..initialize().then((_) => controller.play());
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
final isMuted = controller.value.volume == 0;
return Stack(children: [
VideoPlayerWidget(controller: controller),
if (controller != null && controller.value.isInitialized)
Positioned(
top: size.height * 0.185,
left: size.width * 0.85,
child: IconButton(
icon: Icon(
isMuted ? Icons.volume_off : Icons.volume_up,
color: Colors.white,
size: 20,
),
onPressed: () => controller.setVolume(isMuted ? 1 : 0),
),
),
Positioned(
top: size.height * 0.205,
left: size.width * 0.02,
child: Container(
width: size.width * 0.16,
height: size.height * 0.026,
decoration: BoxDecoration(color: Colors.black.withOpacity(0.39)),
child: Center(
child: Text(
'Preview',
// style: GoogleFonts.ptSans(color: Colors.white, fontSize: 15),
),
),
),
)
]);
}
}
class VideoPlayerWidget extends StatelessWidget {
final VideoPlayerController controller;
const VideoPlayerWidget({
Key? key,
required this.controller,
}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return controller != null && controller.value.isInitialized
? Container(
alignment: Alignment.topCenter,
child: buildVideo(),
)
: Container(
height: 100,
child: Center(child: CircularProgressIndicator()),
);
}
Widget buildVideo() => Stack(children: <Widget>[
buildVideoPlayer(),
Positioned.fill(child: BasicOverlayWidget(controller: controller)),
]);
Widget buildVideoPlayer() => AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: VideoPlayer(controller));
}
class BasicOverlayWidget extends StatelessWidget {
final VideoPlayerController controller;
const BasicOverlayWidget({
Key? key,
required this.controller,
}) : super(key: key);
#override
Widget build(BuildContext context) => GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () =>
controller.value.isPlaying ? controller.pause() : controller.play(),
child: Stack(
children: <Widget>[
buildPlay(),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: buildIndicator(),
),
],
),
);
Widget buildIndicator() => VideoProgressIndicator(
controller,
allowScrubbing: true,
colors: VideoProgressColors(
backgroundColor: Color.fromARGB(255, 115, 11, 3),
playedColor: Color.fromARGB(255, 225, 26, 12)),
);
Widget buildPlay() => controller.value.isPlaying
? Container()
: Container(
alignment: Alignment.center,
color: Colors.black26,
child: Icon(Icons.play_arrow, color: Colors.white, size: 80),
);
}

Add image to listview from Gallery in Flutter/dart

This is currently what I have achived,
#override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
return Scaffold([![enter image description here][1]][1]
resizeToAvoidBottomInset: false,
extendBodyBehindAppBar: true,
appBar: AppBar(
leading: GestureDetector(
child: Image.asset('graphics/back_arrow.png'),
onTap: () {
Get.back();
},
),
backgroundColor: Colors.transparent,
elevation: 0,
title: Text(
'Ask The Internet',
style: GoogleFonts.montserrat(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("graphics/login.png"),
fit: BoxFit.cover,
),
),
child: Column(
children: [
Container(
width: double.infinity,
height: _height * 0.15,
),
Container(
padding:
EdgeInsets.only(top: 64, left: 16, right: 16, bottom: 16),
height: _height * 0.85,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(64),
topRight: Radius.circular(64),
),
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.center,
child: Text(
'Ask The Internet',
style: GoogleFonts.montserrat(
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w600,
color: loginPageTitleColor),
),
),
SizedBox(
height: _height * 0.04,
),
Text(
'Upload Content for UP',
style: GoogleFonts.montserrat(
fontSize: 14,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: askInternetPageTitleColor),
),
SizedBox(
height: _height * 0.01,
),
Row(
children: [
GestureDetector(
child: Image.asset('graphics/add.png'),
onTap: () {
_pickImages();
},
),
],
),
Align(
alignment: Alignment.center,
child: Image.asset('graphics/divider.png')),
SizedBox(
height: _height * 0.04,
),
Text(
'Upload Content for DOWN',
style: GoogleFonts.montserrat(
fontSize: 14,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: askInternetPageTitleColor),
),
SizedBox(
height: _height * 0.01,
),
Image.asset('graphics/add.png'),
Align(
alignment: Alignment.center,
child: Image.asset('graphics/divider.png')),
SizedBox(
height: _height * 0.06,
),
TextFieldInput(
titleText: 'Text up to 140 characters',
hintText: 'Enter Question',
inputType: TextInputType.visiblePassword,
textEditingController: controller.questionController,
titleTextStyle: GoogleFonts.montserrat(
fontSize: 15,
fontWeight: FontWeight.normal,
color: editProfivePageTitleColor),
),
SizedBox(
height: _height * 0.04,
),
Align(
alignment: Alignment.center,
child: Text(
'Ask The Community',
style: GoogleFonts.montserrat(
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w600,
color: loginPageTitleColor),
),
),
SizedBox(
height: _height * 0.04,
),
Text(
'Select The Community',
style: TextStyle(fontSize: 20, color: Colors.black38),
),
Obx(
() => DropdownButton<CommunityItem>(
isExpanded: true,
value: controller.item.value,
items:
controller.communityRows.map((CommunityItem value) {
return DropdownMenuItem<CommunityItem>(
value: value,
child: Text(value!.name!),
);
}).toList(),
onChanged: (value) {
controller.item.value = value!;
},
),
),
SizedBox(
height: _height * 0.04,
),
GestureDetector(
child: Container(
width: double.maxFinite,
height: 55,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
color: Colors.black,
image: DecorationImage(
image: AssetImage("graphics/btn.png"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
"Save",
style: GoogleFonts.montserrat(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white),
),
) // button text
),
onTap: () {
print("you clicked me");
},
),
],
),
),
),
],
),
),
);
}
I want when user click on plus icon he can add images from gallery, just like this.
I tried to use Listview builder but it was not prefect.

How to add scroll on visibility on flutter

i want to make scrollview in visibility but when i try to add SingleChildScrollView it still doesn't work, the result is like this
This is the result
and what I want the application will run as shown below
its main purpose is when the DropdownMenuItem is scrolled on the screen it will not be carried away
thank you, sorry if my words are a little difficult to understand
and this is my code:
class AddressScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() => _AddressState();
}
class _AddressState extends State<AddressScreen> {
String? _detail;
bool _saveButton = false;
String? valueChoose;
List listProvinsi = ['Lampung', 'DKI Jakarta'];
String? valueChoose2;
List listKabupaten = ['Bandar Lampung', 'Jakarta Timur'];
String? valueChoose3;
List listKecamatan = ['Kemiling', 'Cipayung'];
String? valueChoose4;
List listKelurahan = ['Beringin Raya', 'Bambu Apus'];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
titleSpacing: 0,
elevation: 10,
backgroundColor: Theme.of(context).primaryColor,
title: Text(
'Alamat',
style: TextStyle(fontSize: 18),
),
actions: [
GestureDetector(
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileScreen(),
),
),
},
child: Container(
height: 30,
width: 30,
margin: EdgeInsets.only(
right: 3,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 1.5),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(personImg),
),
),
),
),
GestureDetector(
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomeScreen(),
),
),
},
child: Container(
margin: EdgeInsets.only(
right: 7,
),
child: Image.asset(iconAppbar),
),
),
],
),
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Container(
height: SizeConfig.screenHeight / 4.5,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0x14000000),
offset: Offset(
0,
2,
),
blurRadius: 4,
spreadRadius: 2,
),
],
),
child: Row(
children: [
SizedBox(width: SizeConfig.screenWidth / 17),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Container(
child: Text(
'Alamat Anda',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Container(
height: SizeConfig.screenHeight / 9,
width: SizeConfig.screenWidth / 2.2,
// color: Colors.grey,
child: Row(
children: [
Expanded(
child: Text(
'Perumahan Berkoh Indah Jl. Brawijaya No. 45 Gg. Mangga Rt.03 Rw.05 Kel. Arcawinangun, Kec. Purwokerto Timur, Kab. Banyumas Jawa Tengah - 53114',
style: TextStyle(
color: Colors.black54,
fontSize: 11,
),
),
),
],
),
)
],
),
SizedBox(width: SizeConfig.screenWidth / 9),
//#arjunalst2020
// ChangeButton(),
InkWell(
onTap: () {
setState(() {
_saveButton = !_saveButton;
});
},
child: Container(
margin:
EdgeInsets.only(top: SizeConfig.screenHeight / 8),
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 3,
decoration: _saveButton
? BoxDecoration(
color: Colors.grey.shade700,
borderRadius:
BorderRadius.all(Radius.circular(8)))
: BoxDecoration(
color: Colors.pink.shade800,
borderRadius:
BorderRadius.all(Radius.circular(8))),
child: Center(
child: Text(
_saveButton ? 'Simpan' : 'Ubah',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
],
),
),
SizedBox(height: 20),
Visibility(
visible: _saveButton,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Provinsi',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue) {
setState(() {
valueChoose = newValue.toString();
});
},
items: listProvinsi.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kabupaten/Kota',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose2,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue2) {
setState(() {
valueChoose2 = newValue2.toString();
});
},
items: listKabupaten.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kecamatan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose3,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue3) {
setState(() {
valueChoose3 = newValue3.toString();
});
},
items: listKecamatan.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kelurahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose4,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold,
),
onChanged: (newValue4) {
setState(() {
valueChoose4 = newValue4.toString();
});
},
items: listKelurahan.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Jalan/Gang/Nama Gedung/Nama Perumahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
counterText: "",
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Unit/Blok/RT/RW',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kode Pos',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
keyboardType: TextInputType.number,
maxLines: 1,
maxLength: 8,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
counterText: "",
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Center(
child: Container(
width: SizeConfig.screenWidth / 1.12,
height: SizeConfig.screenHeight / 10,
decoration: BoxDecoration(
color: Colors.transparent,
border:
Border.all(color: Colors.black38, width: 0.6),
),
child: Row(
children: [
Container(
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth / 5,
decoration: BoxDecoration(
color: Colors.blueGrey,
),
child: Icon(
Icons.location_on,
color: Colors.white,
size: 35,
),
),
SizedBox(width: SizeConfig.screenWidth / 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
'Tandai Lokasi Peta',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 11,
),
),
Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.9,
child: Row(
children: [
Expanded(
child: Text(
'Jl. Brawijaya No,45 Gg. Mangga Kel. Arcawinangun, Kec. Purwokerto Timur, Banyumas',
style: TextStyle(
fontSize: 11,
color: Colors.grey.shade800,
),
),
),
],
),
),
],
),
],
),
),
),
SizedBox(height: 10),
Container(
height: SizeConfig.screenHeight / 20,
width: SizeConfig.screenWidth / 1.6,
margin:
EdgeInsets.only(left: SizeConfig.screenWidth / 3.3),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
'Pastikan lokasi yang Anda tandai di peta sesuai dengan alamat yang Anda isi di atas',
style: TextStyle(
fontSize: 9,
color: Colors.grey.shade800,
),
),
),
],
),
),
SizedBox(height: 30),
],
),
),
),
],
),
),
),
);
}
}
I'm sorry if my code is still messy or a lot of it is not effective, I'm just learning 😅
Wrap the Visibility widget with Expanded.
Expanded(
child: Visibility(
.....
),
),
If this doesn't work, wrap the main body Column with SingleChildScrollView.
NOTE: Wrapping the main Column with a Container is unnecessary.
I had the same issue multiple times.
you need to wrap your SingleChildScrollView in a Flexible.
Here is the sequence I need to do to always fix:
Flexible(
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children:[Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left:10, top: 20, bottom: 20),
child: Text( )

Flutter Card Layout

So I'm new to flutter, and I'm trying to make a card. But I can't seem to get my desired output.
I tried to separate the different widgets, by using rows and columns, but I kept messing it up.
This is my target output
Target output
This is my current progressCurrent progress
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildhomePageAppBar(),
body: buildExhibitorBody(),
);
}
Widget buildExhibitorBody() {
return Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
buildExhibitorText(),
SizedBox(
height: 10,
),
buildExhibitorCards(),
SizedBox(height: 10),
],
),
),
);
}
Widget buildhomePageAppBar() {
double profileDimension = 35;
return AppBar(
backgroundColor: Colors.white,
titleSpacing: 0,
title: Padding(
padding: EdgeInsets.only(
left: 20,
),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(
top: 5,
bottom: 5,
),
child: Image(
image: AssetImage('assets/images/plain_logo.png'),
height: 30,
),
),
SizedBox(width: 5),
Text(
'Virtex',
style: TextStyle(
color: Colors.black87,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
)
],
),
),
actions: [
Padding(
padding: EdgeInsets.only(
top: 10,
bottom: 10,
),
child: Container(
height: profileDimension,
width: profileDimension,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black54,
width: 2,
),
borderRadius: BorderRadius.circular(50),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image(
width: profileDimension,
height: profileDimension,
image: AssetImage(
'assets/images/profile-image.jpeg',
),
fit: BoxFit.cover,
),
),
),
),
SizedBox(width: 20),
],
);
}
Widget buildExhibitorText() {
return Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
top: 20,
bottom: 10,
),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(
"Exhibitors",
textAlign: TextAlign.justify,
style: TextStyle(
fontFamily: "DMSans",
letterSpacing: -0.2,
fontSize: 20.0,
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
);
}
Widget buildExhibitorCards() { // I think my problem is I don't know how to do the layout here
return Container(
width: 400,
height: 150,
child: Column(children: <Widget>[
Card(
elevation: 1,
child: Padding(
padding: const EdgeInsets.only(),
child: Row(children: [
buildCardImage(),
buildCardExhibitor(),
buildCardIndustry(),
buildCardGo(),
])),
),
]),
);
}
Widget buildCardExhibitor() {
return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
padding: EdgeInsets.all(10),
width: 40,
height: 40,
child: Center(
child: Row(
children: <Widget>[
Text(
"EN",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
Text('Exhibitor Name')
],
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
),
]);
}
Widget buildCardImage() {
return Container(
height: 100,
width: 100,
child: Image(
image: AssetImage('assets/images/onboarding-2.jpg'),
height: 100,
),
);
}
Widget buildCardIndustry() {
return Padding(
padding: EdgeInsets.only(
left: 40,
right: 40,
),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
"Industry 1",
style: TextStyle(
fontFamily: "DMSans",
color: Colors.grey,
letterSpacing: 0.3,
fontSize: 12,
),
),
Text(
"Industry 2",
style: TextStyle(
fontFamily: "DMSans",
letterSpacing: -0.3,
fontSize: 12,
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
],
),
),
);
}
Widget buildCardGo() {
return Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text(
'Go to Booth',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 5),
IconButton(
icon: Icon(
MdiIcons.fromString('arrow-right'),
size: 30,
color: Colors.black,
),
onPressed: () {
Navigator.of(context).pop();
},
),
]);
}
}
I would greatly appreciate any kind of help.
Look:
My own Code
import 'package:flutter/material.dart';
class CardLayout extends StatelessWidget {
Widget buildCardImage = Container(
margin: EdgeInsets.only(right: 10.0),
width: 150,
height: 150,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://picsum.photos/250?image=9"),
),
),
);
Widget buildCardExhibitor =
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
child: Text(
"EN",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
width: 10.0,
),
Text(
'Exhibitor Name',
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
]);
Widget buildCardIndustry = Padding(
padding: EdgeInsets.all(8.0),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding:
EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(100),
),
color: Colors.blueGrey.shade400,
),
child: Text(
'Industry 1',
style: TextStyle(
fontFamily: "DMSans",
color: Colors.white,
letterSpacing: 0.3,
fontSize: 12,
),
),
),
SizedBox(
width: 10.0,
),
Container(
padding:
EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(100),
),
color: Colors.blueGrey.shade400,
),
child: Text(
'Industry 2',
style: TextStyle(
fontFamily: "DMSans",
color: Colors.white,
letterSpacing: 0.3,
fontSize: 12,
),
),
),
],
),
),
);
Widget buildCardGo = Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text(
'Go to Booth',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 3),
IconButton(
icon: Icon(
Icons.arrow_forward_rounded,
size: 30,
color: Colors.blue,
),
onPressed: () {
//Navigator.pop(context);
},
),
]);
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Exhibitor'),
actions: [
IconButton(
icon: Icon(Icons.filter_list_rounded),
onPressed: () {
Navigator.pop(context);
})
],
),
body: Container(
margin: EdgeInsets.only(top: 10.0),
width: MediaQuery.of(context).size.width,
//height: 150.0, // remove this line -------------- (1) [EDIT]
child: Column(
// wrap card with column and add listtile as children -------------- (2) [EDIT]
children: [
ListTile(
leading: Text('Exhibitor'),
trailing: IconButton(
icon: Icon(Icons.filter_list_rounded),
onPressed: () {
Navigator.pop(context);
}),
),
Card(
elevation: 5.0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(5.0),
child: Row(
children: <Widget>[
buildCardImage,
Expanded(
child: Column(
children: <Widget>[
buildCardExhibitor,
buildCardIndustry,
buildCardGo
],
))
],
),
),
),
],
),
),
));
}
}

Repetead widget because of index

Hello I am trying to scroll between more widgets and I took an example from GitHub of a project. The question is how I can erase the index for creating the same widget 8 times. I want to personalize each widget with different photos and different descriptions . Now the first widget is replicated 8 times.( the app is made with flutter)
This is the code:
import 'package:flutter/material.dart';
import 'package:folding_cell/folding_cell.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/rendering.dart';
import 'elementpagedetail.dart';
class Homepage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: ElementMainPage(),
);
}
}
class ElementMainPage extends StatefulWidget {
#override
_ElementMainPageState createState() => _ElementMainPageState();
}
class _ElementMainPageState extends State<ElementMainPage> {
PageController _pageController = PageController(viewportFraction: 0.7);
double _indicatorHeight = 35.45;
int _pageIndex = 0;
List<String> _heroTag = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
List<String> _heroTextTag = List.generate(10, (index) => "t$index");
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
// _indicatorHeight = MediaQuery.of(context).size.height / 2.6 / 8;
// print(MediaQuery.of(context).size.height / 2.6 / 8);
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"#Letsknoweachotherbetter",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
Spacer(),
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
shape: BoxShape.circle),
child: Center(
child: Icon(
Icons.search,
size: 18,
),
),
),
IconButton(icon: Icon(Icons.list), onPressed: () {})
],
),
Text(
"Unknown",
style: TextStyle(fontSize: 38),
),
Text(
"questions",
style: TextStyle(
fontSize: 38, fontWeight: FontWeight.bold),
)
],
),
)),
Expanded(
flex: 8,
child: Row(
children: [
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"01",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Container(
width: 6,
height:
MediaQuery.of(context).size.height / 2.6,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(8)),
child: Stack(
children: [
AnimatedContainer(
height: _indicatorHeight,
decoration: BoxDecoration(
color: Colors.indigoAccent[700],
borderRadius:
BorderRadius.circular(8)),
duration: Duration(milliseconds: 500),
),
],
),
),
),
Text(
"08",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
],
)),
Expanded(
flex: 8,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
bottom: 160,
top: 0,
child: PageView.builder(
controller: _pageController,
onPageChanged: (value) {
setState(() {
_pageIndex = value + 1;
if (value == 0) {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8;
} else {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8 *
(value + 1);
}
print(_indicatorHeight);
print(value.toString());
});
},
itemCount: 8,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
ElementDetailPage(
_heroTag[index],
_heroTextTag[index])));
},
child: Hero(
tag: _heroTag[index],
child: Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 24),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black
.withOpacity(0.2),
spreadRadius: -4,
blurRadius: 4,
offset: Offset(-4, 24))
],
color: Colors.indigoAccent[700],
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(24)),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Spacer(),
Container(
height: 48,
width: 48,
decoration: BoxDecoration(
color: Colors.white
.withOpacity(0.5),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Text(
"Unknown Stage",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
);
},
),
),
Positioned(
bottom: 16,
left: 16,
right: 16,
child: Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"0$_pageIndex",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
Text("/09"),
Spacer(),
Container(
height: 28,
width: 64,
decoration: BoxDecoration(
border: Border.all(
color: Colors.indigoAccent[700]),
borderRadius:
BorderRadius.circular(24),
),
child: Center(
child: Text(
"See all",
style: TextStyle(
fontWeight: FontWeight.bold,
color:
Colors.indigoAccent[700]),
),
),
),
],
),
SizedBox(
height: 8,
),
Container(
height: 72,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color:
Colors.indigoAccent[700],
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Unknown",
style: TextStyle(
fontWeight: FontWeight.bold,
color:
Colors.indigoAccent[700],
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Friends",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Lovers",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Stranger",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Enemy",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
)
],
),
)
],
),
)
],
)),
],
)),
],
),
),
);
}
}
You need to Add a Model Class first,
class CardModalClass {
String unkownStage;
String questionToAddress;
int indexNumber;
int backgroundImage;
CardModalClass(
{this.unkownStage,
this.questionToAddress,
this.indexNumber,
this.backgroundImage});
}
Now you Need to Make a list from that Model Class
List<CardModalClass> cardModalClassList = [
new CardModalClass(
unkownStage: "a", questionToAddress: "frist", indexNumber: 1),
new CardModalClass(
unkownStage: "b", questionToAddress: "second", indexNumber: 2),
new CardModalClass(
unkownStage: "c", questionToAddress: "thrid", indexNumber: 3),
new CardModalClass(
unkownStage: "d", questionToAddress: "fourht", indexNumber: 4),
new CardModalClass(
unkownStage: "e", questionToAddress: "fifth", indexNumber: 5),
new CardModalClass(
unkownStage: "f", questionToAddress: "sixth", indexNumber: 6),
new CardModalClass(
unkownStage: "g", questionToAddress: "seventh", indexNumber: 7),
new CardModalClass(
unkownStage: "h", questionToAddress: "eight", indexNumber: 8),
];
*Now, Final Step is to Iterate through this list and then Access the objects from that CardModalClass in Your PageView.builder*
So Finally Replace the Code of PageView.builder,
PageView.builder(
controller: _pageController,
onPageChanged: (value) {
setState(() {
_pageIndex = value + 1;
if (value == 0) {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8;
} else {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8 *
(value + 1);
}
print(_indicatorHeight);
print(value.toString());
});
},
itemCount: cardModalClassList.length,
itemBuilder: (context, index) {
CardModalClass cardModalClassItem =
cardModalClassList[index];
return GestureDetector(
onTap: () {
// Navigator.of(context).push(
// MaterialPageRoute(
// builder: (context) =>
// ElementDetailPage(
// _heroTag[index],
// _heroTextTag[index])));
},
child: Hero(
tag: _heroTag[index],
child: Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 24),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black
.withOpacity(0.2),
spreadRadius: -4,
blurRadius: 4,
offset: Offset(-4, 24))
],
color: Colors.indigoAccent[700],
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(24)),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Spacer(),
Container(
height: 48,
width: 48,
decoration: BoxDecoration(
color: Colors.white
.withOpacity(0.5),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text(
"${cardModalClassItem.indexNumber}",
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
SizedBox(
height: 8,
),
Text(
"${cardModalClassItem.questionToAddress}",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Text(
"${cardModalClassItem.unkownStage}",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
);
},
),
Note: If You Want Full File Code then ask ME to Edit, Coz Stackoverflow has limit of writing answer to some 30000 Chars.