I've been trying to make a content group (image + text) Dismissible as a single unit (swipe-to-delete/remove), but seems as though I can't assign a Widget list as the child parameter to a Dismissible() object. Looking for possible work-arounds or a solution to the problem.
CODE:
class _PhotosListState extends State<PhotosList> {
#override
Widget build(BuildContext context) {
return _buildBody();
}
Widget _buildBody() {
return SizedBox(
height: 485,
child: ListView.builder(
//scrollDirection: Axis.vertical,
//shrinkWrap: true,
itemCount: Photos.length,
itemBuilder: (context,i){
return Dismissible(
background: Container(
color: Colors.green,
),
key: ValueKey<Object>(Photos.items[i]),
onDismissed: (DismissDirection direction) {
setState(() {
Photos.items.removeAt(i);
});
},
child: SizedBox(
child: <Widget> [
Image.asset(Photos.items[i].image),
Text(Photos.items[i].task,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 19.5)
),
]
)
);
}
)
);
}
}
RESOURCES:
https://medium.com/#mustafatahirhussein/a-guide-to-using-dismissible-widgets-in-flutter-c36c5797d209.
https://api.flutter.dev/flutter/widgets/Dismissible-class.html
In your code of SizedBox:
SizedBox(
child: <Widget> [
Image.asset(Photos.items[i].image),
Text(Photos.items[i].task,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 19.5)
),
you are passing multiple widgets as a child, but child only takes one argument (i.e, one widget).
So, if you want multiple widgets, you should use a Column widget instead - which can accept a List:
SizedBox(
child: Column(children: <Widget>[
Image.asset(Photos.items[i].image),
Text(Photos.items[i].task,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: 19.5)),
]))
Hence the names - child vs children - it's good to keep this in mind as there can be widgets the accept multiple widgets, i.e. children or a widget that can only accept one child.
Related
This is my emulator image which is showing the problem, I also use my mobile but it same condition
I having problems when my container height is more than 100. I can solve my problem by using SingleChildScrollView. But I want to scroll my only my list portion and that's why I don't wanna use SingleChildScrollView. Will my container size increase or container height increase show any render problem?
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../models/transaction.dart';
class TransactionList extends StatelessWidget {
final List<Transaction> transaction;
TransactionList(this.transaction);
#override
Widget build(BuildContext context) {
return Container(
height: 200,
// height: 300, when i use 300 then the problem occures.
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (ctx, index) {
return Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.purple,
width: 2,
),
),
padding: EdgeInsets.all(10),
child: Text(
'\$${transaction[index].amount.toStringAsFixed(2)}',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.purple,
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
transaction[index].title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Text(
DateFormat.yMMMd().format(transaction[index].date),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[600],
),
)
],
)
],
),
);
},
itemCount: transaction.length,
),
);
}
}
Wrap your MainScreen with SingleChildScollView Widget
I have solved this problem. But now my whole screen is scrollable. but it's ok now. I will manage. I add SingleChildScroll... in my main. Now it's ok to use.
In PageViewBuilder, instead of swipe gesture I want to move to the next page using onTap on an ArgonTimerButton which I found on pub.dev. I created a controller and used controller.nextPage() but it gives me this error:
'positions.isNotEmpty': PageController.page cannot be accessed before a PageView is built with it.
My code:
final controller = PageController();
#override
Widget build(BuildContext context) {
MediaQueryData size = MediaQuery.of(context).size;
return PageView.builder(
physics: NeverScrollableScrollPhysics(),
controller: PageController(),
itemCount: widget.workoutExcercises.length,
itemBuilder: (context, index) {
return
//other widgets
ArgonTimerButton(
initialTimer: 3, // Optional
height: 50,
width: size.width * 0.55,
minWidth: width * 0.40,
color: Colors.white,
borderRadius: 5.0,
curve: Curves.easeInToLinear,
child: Text(
"Done?",
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.w700),
),
loader: (timeLeft) {
return Text(
"Rest Time | $timeLeft",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w700),
);
},
onTap: (startTimer, btnState) {
if (btnState == ButtonState.Idle) {
controller.nextPage(duration: Duration(milliseconds:1000), curve: Curves.easeInToLinear);
}
},
),
],
),
);
},
);
How do I solve this?
You are creating the controller but you are not using it.
Instead of :
controller: PageController(),
Do:
controller: controller,
This is the code I have written in my home.dart file.
SliverToBoxAdapter(
child: Container(
width: MediaQuery.of(context).size.width,
height: 245,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount:10,
itemBuilder: (context, index) {
return VideoCard(long: true);
}
),
),
),
This is the VideoCard() class
class VideoCard extends material.StatelessWidget {
final bool long;
const VideoCard({
#material.required this.long,
material.Key key,
}) : super(key: key);
#override
material.Widget build(material.BuildContext context) {
return material.Padding(
padding: const material.EdgeInsets.all(10.0),
child: CardWidget(
gradient: false,
button: true,
width: long ? 360 : 180,
child: material.Column(
mainAxisAlignment: material.MainAxisAlignment.start,
children: <material.Widget>[
material.Container(
width: long ? 360 : 180,
height: 90,
decoration: material.BoxDecoration(
image: material.DecorationImage(
image: material.AssetImage('assets/images/bitcoin.png'),
fit: material.BoxFit.contain),
borderRadius: material.BorderRadius.only(
topLeft: material.Radius.circular(10),
topRight: material.Radius.circular(10),
),
),
child: material.Text(""),
),
material.Padding(
padding: const material.EdgeInsets.all(8.0),
child: material.Text(
"BITCOIN - A pioneer in Crypto!",
overflow: material.TextOverflow.ellipsis,
maxLines: 2,
style: material.TextStyle(
color: material.Colors.white,
fontFamily: 'Red Hat Display',
backgroundColor: material.Colors.black,
fontSize: 16),
),
),
material.Padding(
padding: const material.EdgeInsets.symmetric(horizontal: 8.0),
child: material.Row(
children: <material.Widget>[
material.Icon(BoxIcons.bx_bar_chart_alt_2, size: 16),
material.Text(
"Beginner",
style: material.TextStyle(
color: material.Color(0xFFADADAD),
fontFamily: 'Red Hat Display',
fontSize: 10),
),
material.Spacer(),
material.Text(
"10 mins",
style: material.TextStyle(
color: material.Color(0xFFADADAD),
fontFamily: 'Red Hat Display',
fontSize: 10),
),
material.Icon(BoxIcons.bx_timer, size: 16),
],
),
),
material.Spacer(),
material.Padding(
padding: const material.EdgeInsets.only(top: 6.0),
child: material.GestureDetector(
child: material.Container(
padding: material.EdgeInsets.fromLTRB(0, 14, 0, 14),
decoration: material.BoxDecoration(gradient: Colors().waves),
child: material.Row(
mainAxisAlignment: material.MainAxisAlignment.spaceEvenly,
children: <material.Widget>[
material.Icon(BoxIcons.bx_play_circle,
color: material.Colors.black),
material.Text(
"Learn it",
style: material.TextStyle(
color: material.Colors.black,
fontFamily: 'Red Hat Display',
fontSize: 18),
)
],
),
),
onTap: () {
material.Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => VideoPage(),
),
);
},
),
),
],
),
),
);
}
}
This is the result I got.
But I want unique text,image for every card(list).
The dedign for every list should be same. But text,image,onTap() gesture should be different for every card(list) .
Is my logic is wrong?
Any answer is appreciated!
You've hard coded the text, image and onTap. You should pass the data from the map or list and use [index] to tell your code that card with index 0 in the list, should use text with index 0, and card with index 1, should use text with index 1.
If the items in your list will not change, and you want to hardcode them, you can do that without .builder. You can simply use ListView widget. You can also use Row and/or Column widgets.
ListView(
child: Column(
children[
Card(),
Card(),
Card()
]))
If you want a two column design, create two Columns or ListView inside a Row widget.
You can pass parameters to the constructor of VideoCard like VideoCard(text: textFromListView, image: imageFromListView). In VideoPage you can do like this as well like VideoPage(text: textFromVideoCard, imaeg: imageFromVideoCard);
In VideoCard onTap() you can do like
onTap: () {
material.Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => VideoPage(text: textFromVideoCard, image: imageFromVideoCard),
),
);
},
Then in VideoPage you can access to text and image that you want to. Happy coding.
I have a table filled with changed number of rows and cols.
I would like to change the size of the text inside each card to be the maximum possible size so the words will still be able to read comfortably.
The words inside the cards change each time.
Thank you.
class GameCardButton extends StatelessWidget { final String word; final Color cardColor;
GameCardButton({#required this.word, this.cardColor});
#override Widget build(BuildContext context) {
return Expanded(
child: MaterialButton(
//TODO: implement onPressed
onPressed: () {},
color: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.teal),
),
child: Text(
word,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15.0,
),
),
),
); } }
Wrap the Text widget like this:
Row(
children: [
Expanded(
child: FittedBox(
child: Text(
word,
textAlign: TextAlign.center,
),
),
),
],
)
I would like to add a hyperlink at the bottom of the screen where the Markdown widget is read.
I tried to include the hyperlink in the markdown file but flutter is not launching it.
Then I tried this:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Protective measures'),
),
body: Column(
children: <Widget>[
Flexible(
child: FutureBuilder(
future: DefaultAssetBundle.of(context)
.loadString("assets/docs/protective_measures.md"),
builder:
(BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Markdown(
data: snapshot.data,
styleSheet: MarkdownStyleSheet(
textAlign: WrapAlignment.start,
p: TextStyle(
fontSize: 16,
color: isDark ? Colors.white : Colors.black,
),
h2: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: isDark ? Colors.white : Colors.black,
),
h1: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: isDark ? Colors.white : Colors.black,
),
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
),
InkWell(
child: Text(
'My Hyperlink',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.blue,
decoration: TextDecoration.underline
),
),
onTap: () => launch('https://stackoverflow.com'),
),
],
),
);
}
The result is not really what I wanted. I want a hypertext at the bottom of the screen, just after the Markdown. I also tried with ListView instead of Column but it's not working.
Any hint ?
For plugin flutter_markdown you can do like this
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:url_launcher/url_launcher.dart';
final String _markdownData = "-This is [Google link](https://www.google.com)";
// view
MarkdownBody(
data: _markdownData,
onTapLink: (text, url, title){
launch(url);
},
)
Update for flutter_markdown version 0.5.1 or lower:
MarkdownBody(
data: _markdownData,
onTapLink: (url) {
launch(url);
},
)
I got it. The Markdown() widget has a onTapLink method and I just need to do:
onTapLink(url){
launch(url);
}
It is always good to do a null reference check to:
MarkdownBody(
data: privacyPolicy._privacyPolicy,
onTapLink: (text, url, title){
launch(url!);
},
Expanding upon the code written by: Azamat Mirvosiqov