I'm creating an app that has a list of equations that is inside a column which is inside a SingleChildScrollView. I'm displaying the equations using a package called flutter_tex which uses mathjax to render equations. Now I need the users to able to search equations but when the user types something on the search bar the TeXView gets re-rendered (it takes a long time to re-render) which is a big problem because I need it to be fast. Also, I'm using scoped models.
home_view.dart
class HomeView extends StatelessWidget {
final TextEditingController _searchTextController =
new TextEditingController();
@override
Widget build(BuildContext context) {
return ScopedModel<HomeModel>(
model: locator<HomeModel>(),
child: SafeArea(
child: Scaffold(
appBar: _buildAppBar(),
backgroundColor: BG_COLOR,
body: _buildScrollView(context),
),
),
);
}
List<EquationCard> _getEquations(
BuildContext context, List<EquationCard> equations) {
List<EquationCard> newEqs = [];
for (EquationCard equation in equations) {
newEqs.add(EquationCard(
title: AppLocalizations.of(context).translate(equation.title),
teX: equation.teX,
height: equation.height,
favorite: equation.favorite));
}
return newEqs;
}
Widget _buildAppBar() {
return AppBar(
backgroundColor: BG_COLOR,
elevation: 0.0,
title: ScopedModelDescendant<HomeModel>(
builder: (context, child, model) {
return model.isSearching ? _buildSearchTextField(model) : Container();
},
),
leading: ScopedModelDescendant<HomeModel>(
builder: (context, child, model) {
return model.isSearching
? IconButton(
icon: Icon(Icons.arrow_back, size: 30.0),
onPressed: () {
_searchTextController.clear();
model.setIsSearching(false);
},
)
: Padding(
padding: EdgeInsets.only(left: 18.0),
child: IconButton(
icon: Icon(CustomIcons.menu, size: 30.0),
onPressed: () {},
),
);
},
),
actions: <Widget>[
ScopedModelDescendant<HomeModel>(
builder: (context, child, model) {
return IconButton(
icon: Icon(model.isSearching ? Icons.close : Icons.search,
size: 30.0),
onPressed: () {
if (!model.isSearching) {
model.setIsSearching(true);
} else {
_searchTextController.clear();
}
},
);
},
),
],
);
}
Widget _buildSearchTextField(HomeModel model) {
return TextField(
controller: _searchTextController,
autofocus: true,
onChanged: (txt) {
model.setSearchText(txt);
},
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
decoration: InputDecoration(
hintText: "Search..",
hintStyle: TextStyle(color: Colors.white, fontSize: 18.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
);
}
Widget _buildScrollView(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0),
child: Column(
children: <Widget>[
ScopedModelDescendant<HomeModel>(
builder: (context, child, model) {
return EquationCategory(
AppLocalizations.of(context).translate("physics_title"),
_getEquations(context, PhysicsEquations.equations),
model.searchText);
},
),
],
),
),
],
),
);
}
}
equation_card.dart
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.only(bottom: 15.0),
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
color: BG_COLOR,
child: Padding(
padding: EdgeInsets.only(left: 15.0, right: 5.0, top: 8.0, bottom: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
this.title,
style: TextStyle(
fontSize: 24.0,
color: Colors.white,
fontFamily: "SF-Pro-Text-Bold"),
),
LikeButton(),
],
),
Container(
height: this.height,
child: GestureDetector(
onVerticalDragUpdate: (_) {},
child: TeXView(
teXHTML: r"""
<style>
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
outline: none !important;
}
body {
background-color: """ +
BG_COLOR_HEX +
r""";
}
p {
color: white;
font-size: 22px;
}
.MathJax_SVG_Display {
text-align: left !important;
margin: 0 !important;
}
</style>
<p>
""" +
this.teX +
r"""
</p>
""",
),
),
),
],
),
),
);
}
Would be really thankful if you can help.