how to show all text (Flutter)? - flutter

Question

how to show the text in full? I'm getting this error (on the screen).
what should I change in my code? Is there any way to do it? In case you want to see the code please let me know I will update more.
read_mode.dart
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:quiz2/const/state.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:quiz2/database/category_provider.dart';
import 'package:quiz2/database/db_helper.dart';
import 'package:quiz2/database/question_provider.dart';
import 'package:quiz2/model/user_answer_model.dart';
import 'package:quiz2/utils/utils.dart';
import 'package:quiz2/widgets/question_body.dart';
import 'package:shared_preferences/shared_preferences.dart';
class ReadModePage extends StatefulWidget {
ReadModePage({Key key, this.title}):super(key: key);
final String title;
#override
_ReadModePageState createState() => _ReadModePageState();
}
class _ReadModePageState extends State<ReadModePage> {
SharedPreferences prefs;
int indexPage = 0;
CarouselController buttonCarouselController = CarouselController();
List<UserAnswer> userAnswers = new List<UserAnswer>();
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) async{
prefs = await SharedPreferences.getInstance();
indexPage = await prefs.getInt("${context.read(questionCategoryState).state.name}_${context.read(questionCategoryState).state.ID}") ?? 0;
print('Save index page: ${indexPage}');
Future.delayed(Duration(milliseconds: 500)).then((value) => buttonCarouselController.animateToPage(indexPage));
});
}
#override
Widget build(BuildContext context) {
var questionModule = context.read(questionCategoryState).state;
return WillPopScope(child: Scaffold(
appBar: AppBar(title: Text(questionModule.name),
leading: GestureDetector(onTap: () => showCloseDialog(questionModule),
child: Icon(Icons.arrow_back), ),),
body: Container(
color: Colors.teal[100],
child: FutureBuilder<List<Question>>(
future: getQuestionByCategory(questionModule.ID),
builder: (context, snapshot){
if(snapshot.hasError)
return Center(
child: Text('${snapshot.error}'),);
else if(snapshot.hasData)
{
if(snapshot.data.length>0)
{
return Container(margin: const EdgeInsets.all(5.0),
alignment: Alignment.topCenter,
child: Card(
elevation: 20,
child: Container(
child: SingleChildScrollView(
child: Column(children: [
SizedBox(height: 15,),
QuestionBody(context: context,
carouselController: buttonCarouselController,
questions: snapshot.data,
userAnswers: userAnswers,),
SizedBox(height: 30,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(onPressed: () => showAnswer(context), child: Text("Show Answer"))
],)
],)
)
)
));
}
else return Center(
child: Text('Category don\'n have any question'));
} else
return Center(
child: CircularProgressIndicator(),);
}
),
),
), onWillPop: () async{
showCloseDialog(questionModule);
return true;
});
}
showCloseDialog(Category questionModule) {
showDialog(
context: context,
builder:(_) => new AlertDialog(
title: Text('Close'),
content: Text("Do you want to save this question index?"),
actions: [
TextButton(onPressed: (){
Navigator.of(context).pop(); //close dialog
Navigator.pop(context); //close screen
}, child: Text("No")),
TextButton(onPressed: (){
prefs.setInt("${context.read(questionCategoryState).state.name}_${context.read(questionCategoryState).state.ID}",
context.read(currentReadPage).state);
Navigator.of(context).pop(); //close dialog
Navigator.pop(context); //close screen
}, child: Text("Yes"))
],)
);
}
}
Future <List<Question>> getQuestionByCategory(int id) async{
var db = await copyDB();
var result = await QuestionProvider().getQuestionCategoryId(db, id);
return result;
}
question_body.dart
import 'package:auto_size_text/auto_size_text.dart';
import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:quiz2/const/state.dart';
import 'package:quiz2/database/question_provider.dart';
import 'package:quiz2/model/user_answer_model.dart';
import 'package:flutter/material.dart';
import 'package:quiz2/utils/utils.dart';
class QuestionBody extends StatelessWidget {
QuestionBody({Key key,
this.context,
this.userAnswers,
this.carouselController,
this.questions}):super(key:key);
BuildContext context;
List<UserAnswer> userAnswers;
CarouselController carouselController;
List<Question> questions;
#override
Widget build(BuildContext context){
return CarouselSlider(
carouselController: carouselController,
items: questions.asMap().entries.map((e) => Builder(
builder: (context) {
return Consumer(builder: (context, watch, _){
var userAnswerState = watch(userAnswerSelected).state;
var isShowAnswer = watch(isEnableShowAnswer).state;
return Column(
children: [
Expanded(
child: Column(
children: [
Text( //Question
context.read(isTestMode).state ? "${e.key+1}: ${e.value.questionText}":
"${e.value.questionId}: ${e.value.questionText}",
style: TextStyle(height:2, fontSize: 16)),
Visibility(//Question is image
visible: (e.value.isImageQuestion == null || e.value.isImageQuestion == 0 ? false:true),
child: Container(
height: MediaQuery.of(context).size.height/15*2,
child: e.value.isImageQuestion == 0 ? Container():
Image.network("${e.value.questionImage}",
fit: BoxFit.fill,)
)),
Expanded( //Answer A
child: ListTile(
title: AutoSizeText('${e.value.answerA}',
style: TextStyle(color: isShowAnswer ? e.value.correctAnswer == 'A' ? Colors.red : Colors.grey:Colors.black),
),
leading: Radio(
value: "A",
groupValue: getGroupValue(isShowAnswer,e,userAnswerState),
onChanged: (value) => setUserAnswer(context,e,value),
),
)),
Expanded( //Answer B
child: ListTile(
title: AutoSizeText('${e.value.answerB}',
style: TextStyle(color: isShowAnswer ? e.value.correctAnswer == 'B' ? Colors.red : Colors.grey:Colors.black),
),
leading: Radio(
value: "B",
groupValue: getGroupValue(isShowAnswer,e,userAnswerState),
onChanged: (value) => setUserAnswer(context,e,value),
),
)),
Expanded( //Answer C
child: ListTile(
title: AutoSizeText('${e.value.answerC}',
style: TextStyle(color: isShowAnswer ? e.value.correctAnswer == 'C' ? Colors.red : Colors.grey:Colors.black),
),
leading: Radio(
value: "C",
groupValue: getGroupValue(isShowAnswer,e,userAnswerState),
onChanged: (value) => setUserAnswer(context,e,value),
),
)),
Expanded( //Answer D
child: ListTile(
title: AutoSizeText('${e.value.answerD}',
style: TextStyle(color: isShowAnswer ? e.value.correctAnswer == 'D' ? Colors.red : Colors.grey:Colors.black),
),
leading: Radio(
value: "D",
groupValue: getGroupValue(isShowAnswer,e,userAnswerState),
onChanged: (value) => setUserAnswer(context,e,value),
),
))
],
)),
],
);
},
);
},
)).toList(), options: CarouselOptions(
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 0.9,
initialPage: 0,
height: MediaQuery.of(context).size.height/5*2,
onPageChanged: (page,_){
context.read(currentReadPage).state = page;
context.read(isEnableShowAnswer).state = false;
}
));
}
getGroupValue(bool isShowAnnswer, MapEntry<int, Question> e, UserAnswer userAnswerState){
return isShowAnnswer ? e.value.correctAnswer : (context.read(isTestMode).state ?
context.read(userListAnswer).state[e.key].answered:'');
}
}
Is there any way to do it? In case you want to see the code please let me know I will update more.
screen

Answer 1

Your widget tree seems a bit complicated for no reason.
Assuming what you wanted to achieve was to have your Show Answer button always be visible at the bottom of the Card and the other content on the top of this button to scroll itself inside the Card, this is a much better way to have the structure,
class Minimal extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Minimal')),
body: Container(
margin: const EdgeInsets.all(5.0),
alignment: Alignment.topCenter,
child: Card(
elevation: 20,
child: Container(
height: MediaQuery.of(context).size.height / 5 * 2,
child: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 15),
Container(
color: Colors.deepOrange,
width: double.infinity,
child: Column(
children: [
// Replace this Text with your QuestionBody
Text('asdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \nasdasd \n'),
],
),
),
SizedBox(height: 30),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [TextButton(onPressed: () {}, child: Text("Show Answer"))],
),
],
),
),
),
),
);
}
}
Now, your QuestionBody also seems to have some unnecessary stuff.
Instead of having,
return Column(
children: [
Expanded(
child: Column(
children: [
Text( //Question
Just do,
return Column(
children: [
Text( //Question
Finally remove the height restriction from the CarouselOptions since we already gave that height to the Container inside the Card.

Answer 2

Either give your parent widget more height or wrap your text inside a SingleChildScrollView for example to make the text scrollable