Issue
Here is my code:
import 'package:flutter/material.dart';
import 'package:csv/csv.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:transformer_page_view/transformer_page_view.dart';
class Body extends StatefulWidget {
@override
_Body createState() => _Body();
}
class _Body extends State<Body> {
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
bool _visible = false;
return FutureBuilder<String>(
future: rootBundle.loadString('assets/files/questions.csv'),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
List<List<dynamic>> csvTable =
CsvToListConverter().convert(snapshot.data);
return Scaffold(
appBar: AppBar(
title: Text("Flashcards"),
),
body: new TransformerPageView(
loop: true,
viewportFraction: 0.8,
transformer: new PageTransformerBuilder(
builder: (Widget child, TransformInfo info) {
return new Padding(
padding: new EdgeInsets.all(10.0),
child: new Material(
elevation: 8.0,
textStyle: new TextStyle(color: Colors.white),
borderRadius: new BorderRadius.circular(10.0),
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Positioned(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ParallaxContainer(
child: new Text(
csvTable[info.index + 1][0],
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
),
),
position: info.position,
translationFactor: 300.0,
),
SizedBox(height: size.height * 0.05),
ParallaxContainer(
child: FloatingActionButton(
onPressed: () {
// Call setState. This tells Flutter to rebuild the
// UI with the changes.
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: Icon(Icons.flip),
),
position: info.position,
translationFactor: 300.0,
),
SizedBox(height: size.height * 0.05),
ParallaxContainer(
child: AnimatedOpacity(
// If the widget is visible, animate to 0.0 (invisible).
// If the widget is hidden, animate to 1.0 (fully visible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box must be a child of the AnimatedOpacity widget.
child: new Text(
csvTable[info.index + 1][1],
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
),
),
),
position: info.position,
translationFactor: 400.0,
),
],
),
left: 10.0,
right: 10.0,
top: 100.0,
)
],
),
),
);
}),
itemCount: csvTable.length - 1),
);
});
}
}
The excel file has the following data in it:
Question,
Command to sort lines of text files?,Answer 1
What does the 3rd column of /etc/fstab show?,Answer 2
Alternative name and location for grub.conf on some systems?,Answer 3
What the standard BASH file descriptors?,Answer 4
The idea is that when I click the button the answer shows (Flashcard concept). However, clicking the button is not doing anything. Please for the answers, I have looked everywhere and I know that visibility can be used; however, I had the same behavior when I used it
Solution
I think this is because your visible bool flag is declared inside the build function. So every time you setState, the visible flag is set equal to false. You can move it as a global bool field, then it should keep what you change when you clicked the button.
class _Body extends State<Body> {
bool _visible = false; ///Put it here
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return FutureBuilder<String>(
future: rootBundle.loadString('assets/files/questions.csv'),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
List<List<dynamic>> csvTable =
CsvToListConverter().convert(snapshot.data);
return Scaffold(
appBar: AppBar(
title: Text("Flashcards"),
),
body: new TransformerPageView(
loop: true,
viewportFraction: 0.8,
transformer: new PageTransformerBuilder(
builder: (Widget child, TransformInfo info) {
return new Padding(
padding: new EdgeInsets.all(10.0),
child: new Material(
elevation: 8.0,
textStyle: new TextStyle(color: Colors.white),
borderRadius: new BorderRadius.circular(10.0),
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Positioned(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ParallaxContainer(
child: new Text(
csvTable[info.index + 1][0],
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
),
),
position: info.position,
translationFactor: 300.0,
),
SizedBox(height: size.height * 0.05),
ParallaxContainer(
child: FloatingActionButton(
onPressed: () {
// Call setState. This tells Flutter to rebuild the
// UI with the changes.
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: Icon(Icons.flip),
),
position: info.position,
translationFactor: 300.0,
),
SizedBox(height: size.height * 0.05),
ParallaxContainer(
child: AnimatedOpacity(
// If the widget is visible, animate to 0.0 (invisible).
// If the widget is hidden, animate to 1.0 (fully visible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box must be a child of the AnimatedOpacity widget.
child: new Text(
csvTable[info.index + 1][1],
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
),
),
),
position: info.position,
translationFactor: 400.0,
),
],
),
left: 10.0,
right: 10.0,
top: 100.0,
)
],
),
),
);
}),
itemCount: csvTable.length - 1),
);
});
}
}
Answered By – CbL
Answer Checked By – David Marino (FlutterFixes Volunteer)