I'm beginner in flutter and programming, want To set counter that count images number when it scroll down and also tell remaining pages instead of hardcoded text('1/6'). here it's code
int counter=0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Center(
child: Text('Surah Yaseen' ' (1/6) ', style: TextStyle(fontSize: 30.0),
),
),
),
body: PageView(
scrollDirection: Axis.vertical,
allowImplicitScrolling: true,
children: [
Container(
child: Image.asset('images/1.jpg'),
),
Container(
child: Image.asset('images/2.jpg'),
),
Container(
child: Image.asset('images/3.jpg'),
),
Container(
child: Image.asset('images/4.jpg'),
),
Container(
child: Image.asset('images/5.jpg'),
),
Container(
child: Image.asset('images/6.jpg'),
)
],
),
);
}
}
Try this:
final controller = PageController(
initialPage: 0,
);
final _currentPageNotifier = ValueNotifier<int>(0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Center(
child: Text('Surah Yaseen' ' (${_currentPageNotifier.value}/6) ', style: TextStyle(fontSize: 30.0),
),
),
),
body: PageView(
scrollDirection: Axis.vertical,
allowImplicitScrolling: true,
onPageChanged: (index) {
setState(() {
_currentPageNotifier.value = index+1;
});
},
controller: controller,
children: [
Container(
child: Image.asset('images/1.jpg'),
),
Container(
child: Image.asset('images/2.jpg'),
),
Container(
child: Image.asset('images/3.jpg'),
),
Container(
child: Image.asset('images/4.jpg'),
),
Container(
child: Image.asset('images/5.jpg'),
),
Container(
child: Image.asset('images/6.jpg'),
)
],
),
);
}
Related
I am very new at flutter and I tried writing "body: new ListView.builder....." but it does not work, I am getting always red underline. Can you help me to fix this. I am getting the data to the flipcards from json albüm so I think I must use future builder
This is what it looks like, I want multiple cards according to the elements from json:
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: const Center(
child: Text(
"Main",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
backgroundColor: Colors.green[600],
),
body: Center(
child: FutureBuilder<Album>(
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView(
children: [
const SizedBox(height: 10),
Container(
margin: const EdgeInsets.all(15.0),
height: 200,
width: 350,
child: FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Container(
....................
),
back: Container(
.......................
),
),
),
],
);
} else if (snapshot.hasError) {
return ListView(
children: [
SizedBox(height: 10),
Container(
margin: const EdgeInsets.all(15.0),
height: 200,
width: 350,
child: FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Container(
back: Container(
),
),
),
],
);
}
},
),
),
),
);
}
I'm trying to create scrollable list of posts, but instead i got static non-scrollable bloc of strings, which is overflowing.
Example:
Oveflowing:
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
child: Container(
child: Column(children: [
StreamBuilder<List<Post>>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
);
},
),
]))));
}
Moreover, they all go like a single card, without separating.
Edited code, which is scrolling but doesn't separate posts
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
height: 500,
child:
StreamBuilder<List<Post>>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
return Card(child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
) );
},
),
));
}
I'm tried to find error with documentation, but...
Column and Listview take the maximum available height. therefore, the height of Listview which here is a child of Column should be constrained. You can do so by wrapping your ListView inside Expanded:
child: Column(
children: [
Expanded(
child: ListView(
Also, if your list is long, it is not recommended to set shrinkwrap to true. Because it makes the ListView to load all its items when the layout gets built. So it can slow down performance.
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
height: MediaQuery.of(context).height*0.8, // add this line
child:
// Container( // do not need this
// child: // and this do not need
// Column(children: [ // and this do not need
StreamBuilder<List<Post>>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
ListView( // change this to ListView.builder for more performance
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
);## Heading ##
},
),
// ]) // comment this
// ). // and comment this
)
);
}
I am trying to show a listview after some texts in a column. The text shows properly inside the first Row until I add a listview inside the next row. Everything disappears after adding the ListView.
Here is the Code:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
"Prayer Time",
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.normal),
),
],
),
Row(
children: <Widget>[myList()],
),
],
),
),
floatingActionButton: FloatingActionButton(
tooltip: 'Add Alarm',
child: Icon(Icons.add),
backgroundColor: const Color(0xff0A74C5),
),
);
}
Expanded myList() {
return Expanded(
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
)
);
}
}
change like this:
Expanded(
child: Row(
children: <Widget>[myList()],
),
),
Your ListView should have a fixed Size. Try to wrap the ListView inside a Container.
I run your code and fixed it. Replace your myList() with this code bellow:
Expanded myList() {
return Expanded(
child: Container(
width: double.infinity,
height: 200,
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
),
)
);
}
I have a page with a DefaultTabController that is:
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
resizeToAvoidBottomPadding: true,
appBar: AppBar(
bottom: TabBar(
indicatorColor: Colors.red,
indicator: BoxDecoration(
color: buttonColor,
),
tabs: [Tab(text: "Login"), Tab(text: "Register", key: Key("tabRegistro"))],
),
centerTitle: true,
title: Text(appBarTitle)),
body: TabBarView(
children: [
new LoginPage(),
new RegisterPage(),
],
),
),
);
}
And for example, the LoginPage build is:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: true,
key: _scaffoldKey,
body: SingleChildScrollView(
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Center(
child: Container(
color: backgroundColor,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 155.0,
child: Image.asset(
"assets/images/pet.PNG",
fit: BoxFit.contain,
),
),
SizedBox(height: 20.0),
emailField,
SizedBox(height: 10.0),
passwordField,
SizedBox(height: 20.0),
loginButon,
SizedBox(height: 20.0),
GoogleSignInButton(
darkMode: true,
text: "Login with Google",
onPressed: () {
_sigIn();
}),
],
),
)),
),
),
)));
}
But when I'm writing, the keyboard cover the Textfields and they aren't visible.
With SingleChildScrollView before it works, but now it doesn't work propertly. I have tried to put resizeToAvoidBottomPadding: true but it doesn't work. What could I do to fix this problem?
The code is Ok, the problem is at Android.manifest.xml. I'm using Android Simulator and to hide the status bar I put these line:
android:theme="#android:style/Theme.Holo.NoActionBar.Fullscreen"
If i put the original line it works. The original line is:
android:theme="#style/LaunchTheme"
So i have this script which is build a listview
class NewProductsLists extends StatelessWidget {
final List<NewProducts> newlist;
NewProductsLists({Key key, this.newlist}) : super(key: key);
final formatCurrency =
new NumberFormat.simpleCurrency(locale: "id", decimalDigits: 2);
#override
Widget build(BuildContext context) {
return Expanded(
child: ListView.builder(
itemCount: newlist.length,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
print("Product detail");
},
child: Card(
child: Container(
width: MediaQuery.of(context).size.width * 0.50,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.network(
Configuration.url +
"assets/app_assets/" +
newlist[index].productImage,
width: 90,
height: 90,
filterQuality: FilterQuality.low),
ListTile(
title: Center(
child: Text(
newlist[index].productName,
style: TextStyle(fontSize: 18),
)),
subtitle: Center(
child: Text(
formatCurrency.format(
int.parse(newlist[index].productPrice)),
style: TextStyle(color: Colors.red, fontSize: 15),
)),
),
],
)),
),
);
}));
}
}
and the result looks like this
[
As you can see the card is expanding so hard. I know it is because the Expanded widget. Is it possible to make the card wrap_content ?
For horizontal list view needs fixed height if its not going to be vertical scrollable view you can use Expanded widget with varying flex to get it working.
Working build widget by using expanded widget.
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
centerTitle: false,
title: const Text('November'),
),
body: new Container(
child: Column(
children: <Widget>[
new Expanded(flex: 1,child: new Container(color: Colors.grey[300],),),
Expanded(flex: 2,
child: ListView.builder(
itemCount: 10,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
print("Product detail");
},
child: Card(
child: Container(
width: MediaQuery.of(context).size.width * 0.50,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.network(
'https://homepages.cae.wisc.edu/~ece533/images/watch.png',
width: 90,
height: 90,
filterQuality: FilterQuality.low),
ListTile(
title: Center(
child: Text(
'item Name ${index}',
style: TextStyle(fontSize: 18),
)),
subtitle: Center(
child: Text(
'\$10',
style: TextStyle(
color: Colors.red, fontSize: 15),
)),
),
],
)),
),
);
}),
),
new Expanded(flex: 3,child: new Container(color: Colors.amber[100],),),
],
)));
}
Result screen
Let me know if it suits your requirement.