Search delegate , When I click on Search button it shows red screen with error child! =null - flutter

I create a search option by search delegate but When I click on search button it shows the red screen with this error "The following assertion was thrown building _SearchPage(dirty, dependencies: [_LocalizationsScope-[GlobalKey#69e74], _InheritedTheme], state: _SearchPageState#72bb6): 'package:flutter/src/widgets/basic.dart': Failed assertion: line 6938 pos 15: 'child != null': is not true.
import 'package:flutter/material.dart';
import 'package:grk_001/screen/main_screen.dart';
import 'widgets/entry_item.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:grk_001/screen/favourite_screen.dart';
import 'package:grk_001/Provider/Auth.dart';
import 'package:provider/provider.dart';
import 'package:grk_001/Provider/cart.dart';
import 'package:grk_001/widgets/badge.dart';
import 'package:grk_001/screen/cart_screen.dart';
import 'package:grk_001/widgets/drawer.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:grk_001/models/main_screen_categories_entry.dart';
class HomeScreen extends StatefulWidget {
static const String routename = 'homescreen';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();
FirebaseUser Loggedinuser;
#override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
Future.delayed(Duration.zero).then((_) async {
await Provider.of<Auth>(context, listen: false).getcurrentuser();
});
super.didChangeDependencies();
}
#override
Widget build(BuildContext context) {
final devicesize = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
key: _scaffoldkey,
appBar: AppBar(
leading: IconButton(
onPressed: () {
_scaffoldkey.currentState.openDrawer();
},
icon: Icon(
Icons.list,
color: Colors.white,
size: 35.0,
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(50.0),
child: Container(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
const SizedBox(
width: 10.0,
),
Expanded(
child: GestureDetector(
onTap: () {
_scaffoldkey.currentState.openEndDrawer();
},
child: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
height: 40.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0),
),
child: Text(
'Categories',
),
),
),
),
],
),
),
),
title: Text('HomeScreen'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
showSearch(context: context, delegate: DataSearch());
},
),
IconButton(
icon: Icon(
FontAwesomeIcons.heart,
size: 30.0,
),
tooltip: 'My Wish List',
onPressed: () {
Navigator.pushNamed(context, FavouriteScreen.routename);
},
),
IconButton(
icon: Icon(
Icons.notifications,
size: 30.0,
),
tooltip: 'My Notifications',
onPressed: () {},
),
Consumer<Cart>(
builder: (_, cartdata, ch) => Badge(
child: ch,
value: cartdata.itemcount.toString(),
),
child: IconButton(
onPressed: () {
Navigator.pushNamed(context, CartScreen.routename);
},
icon: Icon(
Icons.shopping_cart,
size: 40.0,
),
),
),
],
),
body: MainScreen(),
// body: CategoryScreen(),
endDrawer: Drawer(
child: Column(
children: <Widget>[
Container(
color: Color(0XFFFF4081),
height: devicesize.height * 0.10,
child: DrawerHeader(
margin: EdgeInsets.zero,
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.apps,
color: Colors.white,
),
SizedBox(
width: 10.0,
),
Text(
'Categories',
style:
TextStyle(color: Colors.white, fontSize: 20.0),
),
],
),
)
// child: Text('Categories'),
),
),
Container(
height: devicesize.height * 0.85,
child: ListView.builder(
itemBuilder: (context, index) => EntryItem(data[index]),
itemCount: data.length,
),
)
],
),
),
drawer: Container(
width: devicesize.width * 0.65,
child: DrawerItem(devicesize, context),
),
),
);
}
}
class DataSearch extends SearchDelegate<String> {
final statelist = [
'Andaman and Nicobar Islands',
' Andhra Pradesh',
'Arunachal Pradesh',
'Assam',
'Bihar',
'Chandigarh ',
'Chhattisgarh',
'Dadra and Nagar Havel',
'Daman and Diu',
'Delhi',
'Goa',
'Gujrat',
'Haryana',
'Himachal Pradesh',
'Uttar Pradesh',
'Uttarakhand',
'West Bengal',
'Sikkim',
'Meghalya',
'Mizoram',
];
final recentlist = ['Modingar', 'Ghaziabad', 'Merrut', 'Hapur', 'Delhi'];
#override
List<Widget> buildActions(BuildContext context) {
// action for app bar
return [
IconButton(
onPressed: () {
query = "";
},
icon: Icon(Icons.clear),
)
];
}
#override
Widget buildLeading(BuildContext context) {
// leading icon on the left of the app bar
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: transitionAnimation,
),
onPressed: () {
close(context, null);
},
);
}
#override
Widget buildResults(BuildContext context) {
// TODO: implement buildResults
return Container(
height: 150.0,
child: Card(
color: Colors.red,
shape: StadiumBorder(),
child: Text(query),
),
);
}
#override
Widget buildSuggestions(BuildContext context) {
// TODO: implement buildSuggestions
final suggestionList = query.isEmpty
? recentlist
: statelist.where((element) => element.startsWith(query)).toList();
ListView.builder(
itemBuilder: (context, index) => ListTile(
onTap: () {
showResults(context);
},
title: RichText(
text: TextSpan(
text: suggestionList[index].substring(0, query.length),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: TextStyle(color: Colors.grey))
]),
)),
itemCount: suggestionList.length,
);
}
}

You can copy paste run full code below
You need return keyword in buildSuggestions
You can return ListView.builder
code snippet
#override
Widget buildSuggestions(BuildContext context) {
// TODO: implement buildSuggestions
final suggestionList = query.isEmpty
? recentlist
: statelist.where((element) => element.startsWith(query)).toList();
return ListView.builder(
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title), actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
showSearch(context: context, delegate: DataSearch());
},
),
]),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class DataSearch extends SearchDelegate<String> {
final statelist = [
'Andaman and Nicobar Islands',
' Andhra Pradesh',
'Arunachal Pradesh',
'Assam',
'Bihar',
'Chandigarh ',
'Chhattisgarh',
'Dadra and Nagar Havel',
'Daman and Diu',
'Delhi',
'Goa',
'Gujrat',
'Haryana',
'Himachal Pradesh',
'Uttar Pradesh',
'Uttarakhand',
'West Bengal',
'Sikkim',
'Meghalya',
'Mizoram',
];
final recentlist = ['Modingar', 'Ghaziabad', 'Merrut', 'Hapur', 'Delhi'];
#override
List<Widget> buildActions(BuildContext context) {
// action for app bar
return [
IconButton(
onPressed: () {
query = "";
},
icon: Icon(Icons.clear),
)
];
}
#override
Widget buildLeading(BuildContext context) {
// leading icon on the left of the app bar
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: transitionAnimation,
),
onPressed: () {
close(context, null);
},
);
}
#override
Widget buildResults(BuildContext context) {
// TODO: implement buildResults
return Container(
height: 150.0,
child: Card(
color: Colors.red,
shape: StadiumBorder(),
child: Text(query),
),
);
}
#override
Widget buildSuggestions(BuildContext context) {
// TODO: implement buildSuggestions
final suggestionList = query.isEmpty
? recentlist
: statelist.where((element) => element.startsWith(query)).toList();
return ListView.builder(
itemBuilder: (context, index) => ListTile(
onTap: () {
showResults(context);
},
title: RichText(
text: TextSpan(
text: suggestionList[index].substring(0, query.length),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: TextStyle(color: Colors.grey))
]),
)),
itemCount: suggestionList.length,
);
}
}

Related

Flutter Unexpected error, opens Heros.dart file

In my app there is 3 button.
Among them Login and Register button is working on onPressed but Settings Button (...) is not working. Once I click settings button I get this error.
Here is my Navigator code
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const SettingsPage();
},
),
);
},
child: const Text(
'...',
style: TextStyle(fontSize: 25),
),
),
This is my entire screen including emulator.
Here is my WelcomePage full code.
import 'package:flutter/material.dart';
import 'package:test_app_2nd/login_page.dart';
import 'package:test_app_2nd/register_page.dart';
import 'package:test_app_2nd/settings.dart';
class WelcomePage extends StatefulWidget {
const WelcomePage({super.key});
#override
State<WelcomePage> createState() => _WelcomePage();
}
class _WelcomePage extends State<WelcomePage> {
#override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
appBar: AppBar(
title: const Text('Welcome'),
centerTitle: true,
backgroundColor: Colors.red,
),
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/flame-sign-in.png'),
const SizedBox(
height: 35.0,
),
const SizedBox(
height: 30.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) {
return const LoginPage();
}));
},
child: const Text('Login'),
),
const SizedBox(
width: 55.0,
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const RegisterPage();
},
),
);
},
child: const Text('Register'),
),
],
),
const SizedBox(
height: 35.0,
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const SettingsPage();
},
),
);
},
child: const Text(
'...',
style: TextStyle(fontSize: 25),
),
),
],
),
),
);
}
}
Here is my settings page full code:
import 'package:flutter/material.dart';
class SettingsPage extends StatefulWidget {
const SettingsPage({super.key});
#override
State<SettingsPage> createState() => _SettingsPageState();
}
String imagePath1 = 'images/flame-4.png';
String imagePath2 = 'images/flame-134.png';
String currentImagePath = imagePath1;
class _SettingsPageState extends State<SettingsPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
actions: [
FloatingActionButton(
onPressed: () {},
child: const Icon(
Icons.add,
),
),
const SizedBox(
width: 5,
),
FloatingActionButton(
onPressed: () {},
child: const Text(
'...',
style: TextStyle(fontSize: 20.0),
),
)
],
),
drawerEnableOpenDragGesture: false,
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
if (currentImagePath == imagePath1) {
currentImagePath = imagePath2;
} else {
currentImagePath = imagePath1;
}
});
},
child: const Text('Click Me'),
),
Image.asset(currentImagePath),
],
),
),
);
}
}
Here is my error page screen shoot:

Adding an Icon to a List using a button and actively updating UI using Provider state management

I want to add an Icon to a List following UI update using flutter Provider state Management.
I was successful to add an Icon using the floating button and confirm the result by printing the new List length. This ensures the addition of an Icon to a List but it does not update the UI for the new added Icon. Snippets are below
#override
_MedicalCosmeticsDetailsPageState createState() =>
_MedicalCosmeticsDetailsPageState();
}
class _MedicalCosmeticsDetailsPageState
extends State<MedicalCosmeticsDetailsPage> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return ChangeNotifierProvider<GridIcons>(
create: (context) => GridIcons(),
child: SafeArea(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(color: Colors.purple),
title: Text(
'xyz',
style: TextStyle(color: Colors.purple),
),
backgroundColor: Colors.transparent,
elevation: size.width * 0.05,
actions: [
Padding(
padding: EdgeInsets.only(right: size.width * 0.01),
child: IconButton(
icon: Icon(
Icons.search,
),
onPressed: () {},
),
),
],
),
body: GridViewPage(),
floatingActionButton: Consumer<GridIcons>(
builder: (context, myIcons, _) {
return FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print(myIcons.iconList.length);
myIcons.addIcon();
},
);
},
),
),
),
);
}
}
```//floating button for adding an ICON
```class GridIcons with ChangeNotifier {
List<IconData> iconList = [
Icons.ac_unit,
Icons.search,
Icons.arrow_back,
Icons.hdr_on_sharp,
];
addIcon<IconData>() {
iconList.add(Icons.sentiment_dissatisfied);
notifyListeners();
}
getIconList<IconData>() {
return iconList;
}
}
```//Function for icon addition
class GridViewPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
List _iconList = GridIcons().getIconList();
return ChangeNotifierProvider<GridIcons>(
create: (context) => GridIcons(),
child: Consumer<GridIcons>(
builder: (context, myIcon, child) {
return GridView.builder(
itemCount: _iconList.length,
padding: EdgeInsets.all(8.0),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 250.0),
itemBuilder: (BuildContext context, int index) {
print('_buildGridViewBuilder $index');
return Card(
color: Colors.purple.shade300,
margin: EdgeInsets.all(8.0),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
_iconList[index],
size: 48.0,
color: Colors.purple.shade100,
),
Divider(),
Text(
'Index $index',
textAlign: TextAlign.center,
style: GoogleFonts.dmSans(
fontSize: 16,
color: Colors.white,
),
),
],
),
onTap: () {
print('Row: $index');
},
),
);
},
);
},
),
);
}
}
The icon doesn't appear in the UI although an icon is added to the Icon List.
You can copy paste run full code below
Step 1: In GridViewPage, you do not need ChangeNotifierProvider
Step 2: remove List _iconList = GridIcons().getIconList();
Step 3: use myIcon.iconList.length and myIcon.iconList[index]
code snippet
class GridViewPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
//List _iconList = GridIcons().getIconList();
return Consumer<GridIcons>(
builder: (context, myIcon, child) {
return GridView.builder(
itemCount: myIcon.iconList.length,
...
Icon(
myIcon.iconList[index],
size: 48.0,
working demo
full code
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
class MedicalCosmeticsDetailsPage extends StatefulWidget {
#override
_MedicalCosmeticsDetailsPageState createState() =>
_MedicalCosmeticsDetailsPageState();
}
class _MedicalCosmeticsDetailsPageState
extends State<MedicalCosmeticsDetailsPage> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return ChangeNotifierProvider<GridIcons>(
create: (context) => GridIcons(),
child: SafeArea(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(color: Colors.purple),
title: Text(
'xyz',
style: TextStyle(color: Colors.purple),
),
backgroundColor: Colors.transparent,
elevation: size.width * 0.05,
actions: [
Padding(
padding: EdgeInsets.only(right: size.width * 0.01),
child: IconButton(
icon: Icon(
Icons.search,
),
onPressed: () {},
),
),
],
),
body: GridViewPage(),
floatingActionButton: Consumer<GridIcons>(
builder: (context, myIcons, _) {
return FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print(myIcons.iconList.length);
myIcons.addIcon();
},
);
},
),
),
),
);
}
}
class GridIcons with ChangeNotifier {
List<IconData> iconList = [
Icons.ac_unit,
Icons.search,
Icons.arrow_back,
Icons.hdr_on_sharp,
];
addIcon<IconData>() {
iconList.add(Icons.sentiment_dissatisfied);
notifyListeners();
}
getIconList<IconData>() {
return iconList;
}
}
class GridViewPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
//List _iconList = GridIcons().getIconList();
return Consumer<GridIcons>(
builder: (context, myIcon, child) {
return GridView.builder(
itemCount: myIcon.iconList.length,
padding: EdgeInsets.all(8.0),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 250.0),
itemBuilder: (BuildContext context, int index) {
print('_buildGridViewBuilder $index');
return Card(
color: Colors.purple.shade300,
margin: EdgeInsets.all(8.0),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
myIcon.iconList[index],
size: 48.0,
color: Colors.purple.shade100,
),
Divider(),
Text(
'Index $index',
textAlign: TextAlign.center,
style: GoogleFonts.dmSans(
fontSize: 16,
color: Colors.white,
),
),
],
),
onTap: () {
print('Row: $index');
},
),
);
},
);
},
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MedicalCosmeticsDetailsPage());
}
}

Cart counter is not updating on going back in flutter

i am adding item to cart on cart screen but when i go back to product for adding more products, the counter is not updating on my bottomNavigation bar ,as far as i know the activity is already in stack so its not refreshing , i can do it in native android (java) on invalidateOptionMenu() function ,which refresh appbar,but i don't know how to do it in flutter and also here its bottom navigation.
i already tried this code on backpressed functionn
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return MainScreen();
},
),
);
on willpopscope,
any help will be appreciated.below is main screen
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
onPageChanged: onPageChanged,
children: <Widget>[
Home(),
FavoriteScreen(),
SearchScreen(),
CartScreen(),
Profile(),
],
),
bottomNavigationBar: BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(width:7),
IconButton(
icon: Icon(
Icons.home,
size: 24.0,
),
color: _page == 0
? Theme.of(context).accentColor
: Theme
.of(context)
.textTheme.caption.color,
onPressed: ()=>_pageController.jumpToPage(0),
),
IconButton(
icon:Icon(
Icons.favorite,
size: 24.0,
),
color: _page == 1
? Theme.of(context).accentColor
: Theme
.of(context)
.textTheme.caption.color,
onPressed: ()=>_pageController.jumpToPage(1),
),
IconButton(
icon: Icon(
Icons.search,
size: 24.0,
color: Theme.of(context).primaryColor,
),
color: _page == 2
? Theme.of(context).accentColor
: Theme
.of(context)
.textTheme.caption.color,
onPressed: ()=>_pageController.jumpToPage(2),
),
IconButton(
icon: IconBadge(
icon: Icons.shopping_cart,
size: 24.0,
),
color: _page == 3
? Theme.of(context).accentColor
: Theme
.of(context)
.textTheme.caption.color,
onPressed: ()=>_pageController.jumpToPage(3),
),
IconButton(
icon: Icon(
Icons.person,
size: 24.0,
),
color: _page == 4
? Theme.of(context).accentColor
: Theme
.of(context)
.textTheme.caption.color,
onPressed: ()=>_pageController.jumpToPage(4),
),
SizedBox(width:7),
],
),
color: Theme.of(context).primaryColor,
shape: CircularNotchedRectangle(),
),
floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
elevation: 4.0,
child: Icon(
Icons.search,
),
onPressed: ()=>_pageController.jumpToPage(2),
),
),
);
IconBadge
class IconBadge extends StatefulWidget {
final IconData icon;
final double size;
static int counteer;
IconBadge({Key key, #required this.icon, #required this.size})
: super(key: key);
#override
_IconBadgeState createState() => _IconBadgeState();
}
class _IconBadgeState extends State<IconBadge> {
//List _users;
static int count ;
Future countForBadge() async{
var db = new DatabaseHelper();
count = await db.getCount();
print("Count: $count");
//print("khAN NNNN $counteer");
}
#override
void initState() {
// TODO: implement initState
super.initState();
countForBadge();
}
#override
Widget build(BuildContext context) {
if (count == null){
count = 0;
}
print("Count lande: $count");
return Stack(
children: <Widget>[
Icon(
widget.icon,
size: widget.size,
),
Positioned(
right: 0.0,
child: Container(
padding: EdgeInsets.all(1),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 13,
minHeight: 13,
),
child: Padding(
padding: EdgeInsets.only(top: 1),
child:Text(
"$count",
style: TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
),
),
],
);
}
}
I've replaced some screen with a simple Container().
If I understand your question, this is the solution using VoidCallBack:
main.dart
import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:issue_counter_cart/cart_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _page;
int _counter = 0;
PageController _pageController;
#override
void initState() {
super.initState();
_pageController = PageController();
}
#override
void dispose() {
_pageController.dispose();
super.dispose();
}
void _increaseCart() {
setState(() {
_counter++;
});
}
void _decreaseCart() {
setState(() {
_counter--;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
// onPageChanged: onPageChanged,
children: <Widget>[
Container(),
Container(),
Container(),
CartScreen(
increaseCart: () => _increaseCart(),
decreaseCart: () => _decreaseCart(),
),
Container(),
],
),
bottomNavigationBar: BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(width: 7),
IconButton(
icon: Icon(
Icons.home,
size: 24.0,
),
color: _page == 0
? Theme.of(context).accentColor
: Theme.of(context).textTheme.caption.color,
onPressed: () => _pageController.jumpToPage(0),
),
IconButton(
icon: Icon(
Icons.favorite,
size: 24.0,
),
color: _page == 1
? Theme.of(context).accentColor
: Theme.of(context).textTheme.caption.color,
onPressed: () => _pageController.jumpToPage(1),
),
IconButton(
icon: Icon(
Icons.search,
size: 24.0,
color: Theme.of(context).primaryColor,
),
color: _page == 2
? Theme.of(context).accentColor
: Theme.of(context).textTheme.caption.color,
onPressed: () => _pageController.jumpToPage(2),
),
IconButton(
icon: Badge(
badgeContent: Text(_counter.toString()),
child: Icon(Icons.shopping_cart),
),
color: _page == 3
? Theme.of(context).accentColor
: Theme.of(context).textTheme.caption.color,
onPressed: () => _pageController.jumpToPage(3),
),
IconButton(
icon: Icon(
Icons.person,
size: 24.0,
),
color: _page == 4
? Theme.of(context).accentColor
: Theme.of(context).textTheme.caption.color,
onPressed: () => _pageController.jumpToPage(4),
),
SizedBox(width: 7),
],
),
color: Theme.of(context).primaryColor,
shape: CircularNotchedRectangle(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
cart_screen.dart
import 'package:flutter/material.dart';
class CartScreen extends StatefulWidget {
final VoidCallback increaseCart;
final VoidCallback decreaseCart;
CartScreen({this.increaseCart, this.decreaseCart});
#override
_CartScreenState createState() => _CartScreenState();
}
class _CartScreenState extends State<CartScreen> {
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: widget.increaseCart,
child: Text('Increase cart'),
),
RaisedButton(
onPressed: widget.decreaseCart,
child: Text('Decrease cart'),
),
],
),
),
);
}
}
To simplify the code I've used the bagdes package

TextEditController clears the text field's text

I am trying to make an application about to do. But there is an issue. I write some text to the text field. But When I add a new text field it clears the text filed's text. And when I delete the TextEditingController it fixes the issue. But then when I try to slide it right or left it clears the text again.
Here is the code
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
void main() => runApp(MaterialApp(
home: Home(),
));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int today=1;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("Takveam"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Center(
child: Text(
"$today",
style: TextStyle(
fontSize: 20.0,
color: Colors.lightGreenAccent[700],
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
),
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Todo()),
);
},
icon: Icon(Icons.featured_play_list),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today-=1;
if(today<1)
today=31;
});
},
icon: Icon(Icons.calendar_today),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today=31;
});
},
icon: Icon(Icons.access_alarms),
color: Colors.lightGreenAccent[700],
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
today+=1;
if(today>31)
{
today=1;
}
});
},
child: Text("Dıkla"),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}
class Todo extends StatefulWidget {
#override
_TodoState createState() => _TodoState();
}
class _TodoState extends State<Todo> {
int i=1;
List<Column> todoos = [
Column(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("To do"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: ListView.builder(
itemCount: i,
itemBuilder: (context,index){
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
child: Container(
height: 60,
child: Card(
color: Colors.lightGreenAccent[700],
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
controller: new TextEditingController(),
style: TextStyle(
fontSize: 20,
color: Colors.white
),
onChanged: (text) {
print(i);
},
),
],
),
),
),
actions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.check_circle,
)
],
secondaryActions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.more_horiz
)
],
),
],
);
}
),
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
i+=1;
});
},
child: Icon(
Icons.add,
),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}
You can copy paste run full code below
Each item need a TextEditingController
For demo purpose, I remove background color
Step 1: declare a List<TextEditingController> listTexttCtrl = [TextEditingController()];
Step 2: In FloatingActionButton, add listTexttCtrl.add(TextEditingController());
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
i += 1;
listTexttCtrl.add(TextEditingController());
});
},
Step 3: TextField controller attribute use listTexttCtrl[index]
TextField(
controller: listTexttCtrl[index],
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
void main() => runApp(MaterialApp(
home: Home(),
));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int today = 1;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("Takveam"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Center(
child: Text(
"$today",
style: TextStyle(
fontSize: 20.0,
color: Colors.lightGreenAccent[700],
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
),
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Todo()),
);
},
icon: Icon(Icons.featured_play_list),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today -= 1;
if (today < 1) today = 31;
});
},
icon: Icon(Icons.calendar_today),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today = 31;
});
},
icon: Icon(Icons.access_alarms),
color: Colors.lightGreenAccent[700],
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
today += 1;
if (today > 31) {
today = 1;
}
});
},
child: Text("Dıkla"),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}
class Todo extends StatefulWidget {
#override
_TodoState createState() => _TodoState();
}
class _TodoState extends State<Todo> {
int i = 1;
List<Column> todoos = [
Column(),
];
List<TextEditingController> listTexttCtrl = [TextEditingController()];
#override
Widget build(BuildContext context) {
return Scaffold(
//backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("To do"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: ListView.builder(
itemCount: i,
itemBuilder: (context, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
child: Container(
height: 60,
child: Card(
color: Colors.lightGreenAccent[700],
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
controller: listTexttCtrl[index],
style: TextStyle(fontSize: 20, color: Colors.white),
onChanged: (text) {
print(i);
},
),
],
),
),
),
actions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.check_circle,
)
],
secondaryActions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.more_horiz)
],
),
],
);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
i += 1;
listTexttCtrl.add(TextEditingController());
});
},
child: Icon(
Icons.add,
),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}

Flutter: BottomNavigationBar rebuilds Page on change of tab

I have a problem with my BottomNavigationBar in Flutter. I want to keep my page alive if I change the tabs.
here my implementation
BottomNavigation
class Home extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> {
int _currentIndex = 0;
List<Widget> _children;
final Key keyOne = PageStorageKey("IndexTabWidget");
#override
void initState() {
_children = [
IndexTabWidget(key: keyOne),
PlaceholderWidget(Colors.green),
NewsListWidget(),
ShopsTabWidget(),
PlaceholderWidget(Colors.blue),
];
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(MyApp.appName),
textTheme: Theme.of(context).textTheme.apply(
bodyColor: Colors.black,
displayColor: Colors.blue,
),
),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
key: IHGApp.globalKey,
fixedColor: Colors.green,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Container(height: 0.0),
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Container(height: 0.0),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Container(height: 0.0),
),
BottomNavigationBarItem(
icon: Icon(Icons.perm_contact_calendar),
title: Container(height: 0.0),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Container(height: 0.0),
),
],
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
Column buildButtonColumn(IconData icon) {
Color color = Theme.of(context).primaryColor;
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color),
],
);
}
}
This is my index page (first tab):
class IndexTabWidget extends StatefulWidget {
IndexTabWidget({Key key}) : super(key: key);
#override
State<StatefulWidget> createState() {
return new IndexTabState();
}
}
class IndexTabState extends State<IndexTabWidget>
with AutomaticKeepAliveClientMixin {
List<News> news = List();
FirestoreNewsRepo newsFirestore = FirestoreNewsRepo();
#override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
child: new Container(
child: new SingleChildScrollView(
child: new ConstrainedBox(
constraints: new BoxConstraints(),
child: new Column(
children: <Widget>[
HeaderWidget(
CachedNetworkImageProvider(
'https://static1.fashionbeans.com/wp-content/uploads/2018/04/50-barbershop-top-savill.jpg',
),
"",
),
AboutUsWidget(),
Padding(
padding: const EdgeInsets.all(16.0),
child: SectionTitleWidget(title: StringStorage.salonsTitle),
),
StreamBuilder(
stream: newsFirestore.observeNews(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
} else {
news = snapshot.data;
return Column(
children: <Widget>[
ShopItemWidget(
AssetImage('assets/images/picture.png'),
news[0].title,
news[0],
),
ShopItemWidget(
AssetImage('assets/images/picture1.png'),
news[1].title,
news[1],
)
],
);
}
},
),
Padding(
padding: const EdgeInsets.only(
left: 16.0, right: 16.0, bottom: 16.0),
child: SectionTitleWidget(title: StringStorage.galleryTitle),
),
GalleryCategoryCarouselWidget(),
],
),
),
),
),
);
}
#override
bool get wantKeepAlive => true;
}
So if I switch from my index tab to any other tab and back to the index tab, the index tab will always rebuild. I debugged it and saw that the build function is always being called on the tab switch.
Could you guys help me out with this issue?
Thank you a lot
Albo
None of the previous answers worked out for me.
The solution to keep the pages alive when switching the tabs is wrapping your Pages in an IndexedStack.
class Tabbar extends StatefulWidget {
Tabbar({this.screens});
static const Tag = "Tabbar";
final List<Widget> screens;
#override
State<StatefulWidget> createState() {
return _TabbarState();
}
}
class _TabbarState extends State<Tabbar> {
int _currentIndex = 0;
Widget currentScreen;
#override
Widget build(BuildContext context) {
var _l10n = PackedLocalizations.of(context);
return Scaffold(
body: IndexedStack(
index: _currentIndex,
children: widget.screens,
),
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.black,
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.format_list_bulleted),
title: new Text(_l10n.tripsTitle),
),
BottomNavigationBarItem(
icon: new Icon(Icons.settings),
title: new Text(_l10n.settingsTitle),
)
],
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
You need to wrap every root page (the first page you see when you press a bottom navigation item) with a navigator and put them in a Stack.
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final int _pageCount = 2;
int _pageIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: _body(),
bottomNavigationBar: _bottomNavigationBar(),
);
}
Widget _body() {
return Stack(
children: List<Widget>.generate(_pageCount, (int index) {
return IgnorePointer(
ignoring: index != _pageIndex,
child: Opacity(
opacity: _pageIndex == index ? 1.0 : 0.0,
child: Navigator(
onGenerateRoute: (RouteSettings settings) {
return new MaterialPageRoute(
builder: (_) => _page(index),
settings: settings,
);
},
),
),
);
}),
);
}
Widget _page(int index) {
switch (index) {
case 0:
return Page1();
case 1:
return Page2();
}
throw "Invalid index $index";
}
BottomNavigationBar _bottomNavigationBar() {
final theme = Theme.of(context);
return new BottomNavigationBar(
fixedColor: theme.accentColor,
currentIndex: _pageIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.list),
title: Text("Page 1"),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text("Page 2"),
),
],
onTap: (int index) {
setState(() {
_pageIndex = index;
});
},
);
}
}
The pages will be rebuild but you should separate your business logic from you UI anyway. I prefer to use the BLoC pattern but you can also use Redux, ScopedModel or InhertedWidget.
Just use an IndexedStack
IndexedStack(
index: selectedIndex,
children: <Widget> [
ProfileScreen(),
MapScreen(),
FriendsScreen()
],
)
I'm not sure but CupertinoTabBar would help.
If you don't want it, this video would be great url.
import 'dart:async';
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_inapp_purchase/flutter_inapp_purchase.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => new _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final List<dynamic> pages = [
new Page1(),
new Page2(),
new Page3(),
new Page4(),
];
int currentIndex = 0;
#override
Widget build(BuildContext context) {
return new WillPopScope(
onWillPop: () async {
await Future<bool>.value(true);
},
child: new CupertinoTabScaffold(
tabBar: new CupertinoTabBar(
iconSize: 35.0,
onTap: (index) {
setState(() => currentIndex = index);
},
activeColor: currentIndex == 0 ? Colors.white : Colors.black,
inactiveColor: currentIndex == 0 ? Colors.green : Colors.grey,
backgroundColor: currentIndex == 0 ? Colors.black : Colors.white,
currentIndex: currentIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.looks_one),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_two),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_3),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_4),
title: Text(''),
),
],
),
tabBuilder: (BuildContext context, int index) {
return new DefaultTextStyle(
style: const TextStyle(
fontFamily: '.SF UI Text',
fontSize: 17.0,
color: CupertinoColors.black,
),
child: new CupertinoTabView(
routes: <String, WidgetBuilder>{
'/Page1': (BuildContext context) => new Page1(),
'/Page2': (BuildContext context) => new Page2(),
'/Page3': (BuildContext context) => new Page3(),
'/Page4': (BuildContext context) => new Page4(),
},
builder: (BuildContext context) {
return pages[currentIndex];
},
),
);
},
),
);
}
}
class Page1 extends StatefulWidget {
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
String title;
#override
void initState() {
title = 'Page1';
super.initState();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
leading: new IconButton(
icon: new Icon(Icons.text_fields),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => Page13()));
},
)),
body: new Center(
child: new Text(title),
),
);
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Page2'),
leading: new IconButton(
icon: new Icon(Icons.airline_seat_flat_angled),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => Page12()));
},
)),
body: new Center(
child: Column(
children: <Widget>[
CupertinoSlider(
value: 25.0,
min: 0.0,
max: 100.0,
onChanged: (double value) {
print(value);
}
),
],
),
),
);
}
}
class Page3 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Page3'),
),
body: new Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
child: new Text('Cupertino'),
textColor: Colors.white,
color: Colors.red,
onPressed: () {
List<int> list = List.generate(10, (int i) => i + 1);
list.shuffle();
var subList = (list.sublist(0, 5));
print(subList);
subList.forEach((li) => list.remove(li));
print(list);
}
),
new SizedBox(height: 30.0),
new RaisedButton(
child: new Text('Android'),
textColor: Colors.white,
color: Colors.lightBlue,
onPressed: () {
var mes = 'message';
var messa = 'メッセージ';
var input = 'You have a new message';
if (input.contains(messa) || input.contains(mes)) {
print('object');
} else {
print('none');
}
}
),
],
),
),
);
}
}
class Page4 extends StatelessWidget {
static List<int> ints = [1, 2, 3, 4, 5];
static _abc() {
print(ints.last);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Page4'),
),
body: new Center(
child: new RaisedButton(
child: new Text('Static', style: new TextStyle(color: Colors.white)),
color: Colors.lightBlue,
onPressed: _abc,
)),
);
}
}
class Page12 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Page12'),
actions: <Widget>[
new FlatButton(
child: new Text('GO'),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => Page13()));
},
)
],
),
body: new Center(
child: new RaisedButton(
child: new Text('Swiper', style: new TextStyle(color: Colors.white)),
color: Colors.redAccent,
onPressed: () {},
)),
);
}
}
class Page13 extends StatefulWidget {
#override
_Page13State createState() => _Page13State();
}
class _Page13State extends State<Page13> with SingleTickerProviderStateMixin {
final List<String> _productLists = Platform.isAndroid
? [
'android.test.purchased',
'point_1000',
'5000_point',
'android.test.canceled',
]
: ['com.cooni.point1000', 'com.cooni.point5000'];
String _platformVersion = 'Unknown';
List<IAPItem> _items = [];
List<PurchasedItem> _purchases = [];
#override
void initState() {
super.initState();
initPlatformState();
}
Future<void> initPlatformState() async {
String platformVersion;
try {
platformVersion = await FlutterInappPurchase.platformVersion;
} on PlatformException {
platformVersion = 'Failed to get platform version.';
}
var result = await FlutterInappPurchase.initConnection;
print('result: $result');
if (!mounted) return;
setState(() {
_platformVersion = platformVersion;
});
// refresh items for android
String msg = await FlutterInappPurchase.consumeAllItems;
print('consumeAllItems: $msg');
}
Future<Null> _buyProduct(IAPItem item) async {
try {
PurchasedItem purchased = await FlutterInappPurchase.buyProduct(item.productId);
print('purchased: ${purchased.toString()}');
} catch (error) {
print('$error');
}
}
Future<Null> _getProduct() async {
List<IAPItem> items = await FlutterInappPurchase.getProducts(_productLists);
print(items);
for (var item in items) {
print('${item.toString()}');
this._items.add(item);
}
setState(() {
this._items = items;
this._purchases = [];
});
}
Future<Null> _getPurchases() async {
List<PurchasedItem> items = await FlutterInappPurchase.getAvailablePurchases();
for (var item in items) {
print('${item.toString()}');
this._purchases.add(item);
}
setState(() {
this._items = [];
this._purchases = items;
});
}
Future<Null> _getPurchaseHistory() async {
List<PurchasedItem> items = await FlutterInappPurchase.getPurchaseHistory();
for (var item in items) {
print('${item.toString()}');
this._purchases.add(item);
}
setState(() {
this._items = [];
this._purchases = items;
});
}
List<Widget> _renderInApps() {
List<Widget> widgets = this
._items
.map((item) => Container(
margin: EdgeInsets.symmetric(vertical: 10.0),
child: Container(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 5.0),
child: Text(
item.toString(),
style: TextStyle(
fontSize: 18.0,
color: Colors.black,
),
),
),
FlatButton(
color: Colors.orange,
onPressed: () {
print("---------- Buy Item Button Pressed");
this._buyProduct(item);
},
child: Row(
children: <Widget>[
Expanded(
child: Container(
height: 48.0,
alignment: Alignment(-1.0, 0.0),
child: Text('Buy Item'),
),
),
],
),
),
],
),
),
))
.toList();
return widgets;
}
List<Widget> _renderPurchases() {
List<Widget> widgets = this
._purchases
.map((item) => Container(
margin: EdgeInsets.symmetric(vertical: 10.0),
child: Container(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 5.0),
child: Text(
item.toString(),
style: TextStyle(
fontSize: 18.0,
color: Colors.black,
),
),
)
],
),
),
))
.toList();
return widgets;
}
#override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width-20;
double buttonWidth=(screenWidth/3)-20;
return new Scaffold(
appBar: new AppBar(),
body: Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Running on: $_platformVersion\n',
style: TextStyle(fontSize: 18.0),
),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: buttonWidth,
height: 60.0,
margin: EdgeInsets.all(7.0),
child: FlatButton(
color: Colors.amber,
padding: EdgeInsets.all(0.0),
onPressed: () async {
print("---------- Connect Billing Button Pressed");
await FlutterInappPurchase.initConnection;
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
alignment: Alignment(0.0, 0.0),
child: Text(
'Connect Billing',
style: TextStyle(
fontSize: 16.0,
),
),
),
),
),
Container(
width: buttonWidth,
height: 60.0,
margin: EdgeInsets.all(7.0),
child: FlatButton(
color: Colors.amber,
padding: EdgeInsets.all(0.0),
onPressed: () async {
print("---------- End Connection Button Pressed");
await FlutterInappPurchase.endConnection;
setState(() {
this._items = [];
this._purchases = [];
});
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
alignment: Alignment(0.0, 0.0),
child: Text(
'End Connection',
style: TextStyle(
fontSize: 16.0,
),
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: buttonWidth,
height: 60.0,
margin: EdgeInsets.all(7.0),
child: FlatButton(
color: Colors.green,
padding: EdgeInsets.all(0.0),
onPressed: () {
print("---------- Get Items Button Pressed");
this._getProduct();
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
alignment: Alignment(0.0, 0.0),
child: Text(
'Get Items',
style: TextStyle(
fontSize: 16.0,
),
),
),
)),
Container(
width: buttonWidth,
height: 60.0,
margin: EdgeInsets.all(7.0),
child: FlatButton(
color: Colors.green,
padding: EdgeInsets.all(0.0),
onPressed: () {
print(
"---------- Get Purchases Button Pressed");
this._getPurchases();
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
alignment: Alignment(0.0, 0.0),
child: Text(
'Get Purchases',
style: TextStyle(
fontSize: 16.0,
),
),
),
)),
Container(
width: buttonWidth,
height: 60.0,
margin: EdgeInsets.all(7.0),
child: FlatButton(
color: Colors.green,
padding: EdgeInsets.all(0.0),
onPressed: () {
print(
"---------- Get Purchase History Button Pressed");
this._getPurchaseHistory();
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
alignment: Alignment(0.0, 0.0),
child: Text(
'Get Purchase History',
style: TextStyle(
fontSize: 16.0,
),
),
),
)),
]),
],
),
Column(
children: this._renderInApps(),
),
Column(
children: this._renderPurchases(),
),
],
),
],
),
),
);
}
}
Use IndexedStack widget:
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int _currentIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: IndexedStack(
index: _currentIndex,
children: const [
HomePage(),
SettingsPage(),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (int index) => setState(() => _currentIndex = index),
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
print('build home');
return Center(child: Text('Home'));
}
}
class SettingsPage extends StatelessWidget {
const SettingsPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
print('build settings');
return Center(child: Text('Settings'));
}
}
Make sure the IndexedStack children widget list is constant. This will prevent the widgets from rebuilding when setState() is called.
IndexedStack(
index: _currentIndex,
children: const [
HomeWidget(),
SettingsWidget(),
],
),
The problem with IndexedStack is that all the widgets will be built at the same time when IndexedStack is initialized. For small widgets (like the example above), it won't be a problem. But for big widgets, you may see some performance issues.
Consider using the lazy_load_indexed_stack package. According to the package:
[LazyLoadIndexedStack widget] builds the required widget only when it is needed, and returns the pre-built widget when it is needed again
Again, make sure the LazyLoadIndexedStack children widgets are constant, otherwise they will keep rebuilding when setState is called.
If, you just need to remember the scroll position inside a list, the best option is to simply use a PageStoreKey object for the key property:
#override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
key: PageStorageKey<String>('some-list-key'),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => _onElementTapped(index),
child: makeCard(items[index])
);
},
),
);
}
According to https://docs.flutter.io/flutter/widgets/PageStorageKey-class.html, this should work on ANY scrollable widget.
if i use the IndexedStack in the body it is loading only the main screen content not every other screen which is present in the bottom nativation bar.
Using IndexedStack with bloc pattern solved everthing.