I need to display images of several different sizes in a ListView.
When the image is larger than screen.width, I'd like it to shrink to fit width.
But when the image is shorter, I'd like it to keep its original size.
How can I do it? Thanks in advance.
I tried putting Image inside Flex, but couldn't "stop" the small one to expand.
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:firebase_database/firebase_database.dart';
void main() => runApp(MyApp());
const _imagesDir = "images";
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image List',
theme: ThemeData(primarySwatch: Colors.blue,),
home: MyListPage(title: 'Image List Page'),
);
}
}
class MyListPage extends StatefulWidget {
MyListPage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyListPageState createState() => _MyListPageState();
}
class _MyListPageState extends State<MyListPage> {
Widget build1(BuildContext context, AsyncSnapshot snapshot) {
Widget _tileImagem(BuildContext context, String imageName) {
imageName = _imagesDir + "/"+ imageName;
return Padding(padding:EdgeInsets.all(2.0),
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Image.asset(imageName),
]
),
);
}
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(40.0),
child: AppBar(
title: Row(
children: <Widget> [
Padding(padding: EdgeInsets.only(right: 20.0),),
Text( 'Duda'),
]),
)
),
body: ListView(
shrinkWrap: true,
children: <Widget>[
Container(),
_tileImagem(context, 'flutter_big_medium.png'),
Container(), //My App have some different widgets
Container(),
Container(), //I kept them here just as place holder
Container(),
Container(),
Container(),
Container(),
Container(),
Divider(),
TileTexts(),
Divider(),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () { },
child: Icon(Icons.skip_next),
),
);
}
#override
Widget build(BuildContext context) {
return new FutureBuilder(
future:
FirebaseDatabase.instance.reference()
.child('Testing')
.once(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState){
case ConnectionState.done: return build1(context, snapshot);
case ConnectionState.waiting: return CircularProgressIndicator();
default:
if (snapshot.hasError) {
return Text("hasError: ${snapshot.error}");
} else {
return Text("${snapshot.data}");
}
}
}
);
}
}
class TileTexts extends StatefulWidget {
TileTexts() : super();
#override
_TileTextsState createState() => _TileTextsState();
}
class _TileTextsState extends State<TileTexts> {
#override
void initState() {
super.initState();
}
Widget text1(String title, String imageName, TextStyle style) {
return Expanded(
child:Container(
margin: const EdgeInsets.only(left: 10.0),
child: Column(
children: <Widget>[
Html(data: title,
useRichText: true,
defaultTextStyle: style,
),
((imageName == null))
? Container()
: Image.asset(_imagesDir + "/"+imageName),
]
),
),
);
}
Widget _tileDetail(BuildContext context, String imageName) {
return Container(
padding: EdgeInsets.fromLTRB(5.0,0.0,10.0,0.0),
child: Row(
children: <Widget>[
Material(
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ),
clipBehavior: Clip.antiAlias,
child: MaterialButton(
child: Text('X'),
color: Theme.of(context).accentColor,
elevation: 8.0,
height: 36.0,
minWidth: 36.0,
onPressed: () {
//
},
),
),
text1('<body>veja a imagem</body>', imageName, Theme.of(context).textTheme.caption),
],
),
);
}
//_TileTexts
#override
Widget build(BuildContext context) {
print('_TileTexts build');
return Column(
children: <Widget>[
_tileDetail(context, 'flutter_med_medium.png'),
Divider(),
_tileDetail(context, 'flutter_med_medium.png'),
Divider(),
_tileDetail(context, 'flutter_med_medium.png'),
],
);
}
}
Create an method,getTitleImage(imageName), that returns Flex if image is bigger then screen-with, else return the image inside an container or in other widget of choice.
....
return Padding(padding:EdgeInsets.all(2.0),
child: getTitleImage(imageName)
),
);
....
Here is some other tips and tricks using Flex
Please check the doc, it says:
The heights of the leading and trailing widgets are constrained according to the Material spec. An exception is made for one-line ListTiles for accessibility. Please see the example below to see how to adhere to both Material spec and accessibility requirements.
after reading docs, you should achieve what you want :)
Related
I need list view builder to generate tiles based on the number of documents there will be in firebase for now I am just trying to sort the UI. I dont understand why its breaking. Image 1 is when the ListView.buidler is commented out. Image 2 is leaving ListView in.
List item
import 'package:flutter/material.dart';
import 'package:track/src/widgets/admin_navbar.dart' as widgets;
import 'package:track/src/widgets/colour_icon_button.dart' as widgets;
import 'package:track/src/features/clients/domain/client_firebase_storage.dart';
class ClientsPage extends StatefulWidget {
const ClientsPage({Key? key}) : super(key: key);
#override
State<ClientsPage> createState() => _ClientsPageState();
}
class _ClientsPageState extends State<ClientsPage> {
late final ClientFirebaseStorage _clientsService;
late double screenWidth;
late double screenHeight;
#override
void initState() {
_clientsService = ClientFirebaseStorage();
super.initState();
}
#override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: const FlutterLogo(),
),
drawer: const widgets.AdminNavBar(),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Clients',
style: Theme.of(context).textTheme.headline1,
),
const SizedBox(
width: 30,
),
const widgets.ColourIconButton(icon: Icon(Icons.search_rounded)),
const SizedBox(
width: 5,
),
const widgets.ColourIconButton(
icon: Icon(Icons.swap_vert_rounded),
),
SizedBox(
width: screenWidth - 350,
),
const widgets.ColourIconButton(
icon: Icon(Icons.add),
),
],
),
SizedBox(
height: 190,
),
Text('Test1'),
Text('Test2'),
Text('Test3'),
ListView.builder(
itemBuilder: (context, index) {
return ListTile(
onTap: () {},
title: Text('#'),
);
},
)
// StreamBuilder(
// stream: _clientsService.allClients(),
// builder: (context, snapshot) {
// switch (snapshot.connectionState) {
// case ConnectionState.waiting:
// case ConnectionState.active: //implicit fall through
// if (snapshot.hasData) {
// final allClients = snapshot.data as Iterable<Client>;
// return ClientsListView(
// clients: allClients,
// onTap: (clients) {},
// );
// } else {
// return const CircularProgressIndicator();
// }
// default:
// return const CircularProgressIndicator();
// }
// },
// ),
],
),
);
}
}
Before adding List.viewbuilder
After adding list.viewbuilder
for the first picture (before adding Listview.builder) items are rendered in center because you have a Row inside your Column, Column & Row have a default CrossAxisAlignment.center
After adding the ListView.builder, the log will be showing you an error, ListView here needs to be either inside an Expanded or shrinkWrap: true,
Setting an Expanded as a parent for the ListView will make the listview scrollable only, but adding the attribute shrinkWrap: true will stop the scrolling feature in your Listview, and then you will have to put your Column inside a Listview or SingleChildScrollView
I want to create a generic Layout which accepts a child Widget as a parameter, that lays out the content as follows:
I have an AppBar at the Top, a Title (headline), and below that the Content (could be anything). At the bottom, I have a Column with a few buttons. If the content is too big for the screen, all those widgets, except the AppBar, are scrollable. If the content fits the screen, the title and content should be aligned at the top, and the buttons at the bottom.
To showcase what I mean, I created a drawing:
It is easy to create to scrollable content functionality. But I struggle with laying out the content so that the buttons are aligned at the bottom, if the content does NOT need to be scrollable.
It is important to say that I don't know the height of the content widget or the buttons. They are dynamic and can change their height. Also, the title is optional and can have two different sizes.
What I tried is the following:
import 'package:flutter/material.dart';
class BaseScreen extends StatelessWidget {
final String? title;
final bool bigHeader;
final Widget child;
final Widget bottomButtons;
const BaseScreen({
Key? key,
required this.child,
required this.bottomButtons,
this.bigHeader = true,
this.title,
}) : super(key: key);
#override
Widget build(BuildContext context) {
final AppBar appBar = AppBar(
title: Text("AppBar"),
);
double minChildHeight = MediaQuery.of(context).size.height -
MediaQuery.of(context).viewInsets.bottom -
MediaQuery.of(context).viewInsets.top -
MediaQuery.of(context).viewPadding.bottom -
MediaQuery.of(context).viewPadding.top -
appBar.preferredSize.height;
if (title != null) {
minChildHeight -= 20;
if (bigHeader) {
minChildHeight -= bigHeaderStyle.fontSize!;
} else {
minChildHeight -= smallHeaderStyle.fontSize!;
}
}
final Widget content = Column(
mainAxisSize: MainAxisSize.min,
children: [
if (title != null)
Text(
title!,
style: bigHeader ? bigHeaderStyle : smallHeaderStyle,
textAlign: TextAlign.center,
),
if (title != null)
const SizedBox(
height: 20,
),
ConstrainedBox(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
child,
bottomButtons,
],
),
constraints: BoxConstraints(
minHeight: minChildHeight,
),
),
],
);
return Scaffold(
appBar: appBar,
body: SingleChildScrollView(
child: content,
),
);
}
TextStyle get bigHeaderStyle {
return TextStyle(fontSize: 20);
}
TextStyle get smallHeaderStyle {
return TextStyle(fontSize: 16);
}
}
The scrolling effects work perfectly, but the Buttons are not aligned at the bottom. Instead, they are aligned directly below the content. Does anyone know how I can fix this?
DartPad you can check here
customscrollview tutorial
Scaffold(
// bottomNavigationBar: ,
appBar: AppBar(
title: Text(" App Bar title ${widgets.length}"),
),
//============
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
// controller: _mycontroller,
children: [
title,
...contents,
// ---------------------This give Expansion and button get down --------
Expanded(
child: Container(),
),
// ---------------------This give Expansion and button get down --------
Buttons
],
),
)
],
))
We can Achieve with the help of CustomScrollView widget and Expanded widget.here Expanded widget just expand between the widget
Sample Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()),
);
}
class MyApp extends StatefulWidget {
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var widgets = [];
var _mycontroller = ScrollController();
#override
Widget build(BuildContext context) {
var title = Center(
child: Text(
"Scrollable title ${widgets.length}",
style: TextStyle(fontSize: 30),
));
var contents = [
...widgets,
];
var Buttons = Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
child: ElevatedButton(
onPressed: () {
setState(() {
widgets.add(Container(
height: 100,
child: ListTile(
title: Text(widgets.length.toString()),
subtitle: Text("Contents BTN1"),
),
));
});
// _mycontroller.jumpTo(widgets.length * 100);
},
child: Text("BTN1"),
),
),
)),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
child: ElevatedButton(
onPressed: () {
setState(() {
if (widgets.length > 0) {
widgets.removeLast();
}
});
// _mycontroller.jumpTo(widgets.length * 100);
},
child: Text("BTN2"),
),
),
))
],
);
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SafeArea(
child: Scaffold(
// bottomNavigationBar: ,
appBar: AppBar(
title: Text(" App Bar title ${widgets.length}"),
),
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
// controller: _mycontroller,
children: [
title,
...contents,
Expanded(
child: Container(),
),
Buttons
],
),
)
],
)),
),
);
}
}
Try this:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: BaseScreen(
bottomButtons: [
ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
],
content: Container(
color: Colors.lightGreen,
height: 200,
),
title: 'Title',
),
);
}
}
class BaseScreen extends StatelessWidget {
final bool bigHeader;
final List<Widget> bottomButtons;
final String? title;
final Widget content;
const BaseScreen({
this.bigHeader = true,
required this.bottomButtons,
required this.content,
this.title,
});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AppBar'),
),
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: [
if (title != null)
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Text(
title!,
style: bigHeader ? _bigHeaderStyle : _smallHeaderStyle,
textAlign: TextAlign.center,
),
),
content,
const Spacer(),
...bottomButtons,
],
),
),
],
),
);
}
TextStyle get _bigHeaderStyle => const TextStyle(fontSize: 20);
TextStyle get _smallHeaderStyle => const TextStyle(fontSize: 16);
}
Screenshots:
without_scrolling
scrolled_up
scrolled_down
I am new to flutter and trying to implement a tabview in homePage in the flutter app.
The first tab is populated from data from firebase remote config and second tab is populated by using Futurebuilder. When I switch the tabs the future function is not triggering. It is only triggered during initial application load. Whenever I switch tabs and come back to 2nd tab. The futurebuilder's future function is not triggered again.
Can someone give any solutions for this.?
Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: GridView.count(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
padding: const EdgeInsets.all(4.0),
childAspectRatio: 1.0,
crossAxisCount: isTablet ? 2 : 1,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
children: [
FutureBuilder(
future: _getBookmarks,
builder:
(BuildContext context, AsyncSnapshot snapshot) {
var listWidget;
if (snapshot.connectionState ==
ConnectionState.done) {
if (snapshot.data.length == 0) {
listWidget = Container(
child: Center(
child: Text("No Favorites to Display!"),
));
} else {
listWidget = ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
final bookmarks = snapshot.data[index];
return BuildFavoriteCard(
bookmarks, context);
},
);
}
} else {
listWidget = Center(
child: CircularProgressIndicator(),
);
}
return listWidget;
})
],
))
Here's an example combining the TabBar and FutureBuilder examples of the Flutter documentation.
If you run this, you will see that a new future is created each time you navigate to the first tab (since the TabBarView's content is rebuilt).
I would assume that this is currently not working for you since your future _getBookmarks is defined somewhere higher up in the widget tree (in the part that is not rebuilt by switching tabs).
The solution would be to move the future inside your TabBarView widget.
import 'package:flutter/material.dart';
void main() {
runApp(const TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
const TabBarDemo({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
title: const Text('Tabs Demo'),
),
body: TabBarView(
children: [
Center(
child: MyStatefulWidget(),
),
Icon(Icons.directions_transit),
],
),
),
),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({
Key? key,
}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Future<String>? _calculation;
#override
void initState() {
_calculation = Future<String>.delayed(
const Duration(seconds: 2),
() => 'Data Loaded',
);
super.initState();
}
#override
Widget build(BuildContext context) {
return DefaultTextStyle(
style: Theme.of(context).textTheme.headline2!,
textAlign: TextAlign.center,
child: FutureBuilder<String>(
future:
_calculation, // calculation, // a previously-obtained Future<String> or null
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
List<Widget> children;
if (snapshot.hasData) {
children = <Widget>[
const Icon(
Icons.check_circle_outline,
color: Colors.green,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Result: ${snapshot.data}'),
),
];
} else if (snapshot.hasError) {
children = <Widget>[
const Icon(
Icons.error_outline,
color: Colors.red,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Error: ${snapshot.error}'),
)
];
} else {
children = const <Widget>[
SizedBox(
child: CircularProgressIndicator(),
width: 60,
height: 60,
),
Padding(
padding: EdgeInsets.only(top: 16),
child: Text('Awaiting result...'),
)
];
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: children,
),
);
},
),
);
}
}
I have been struggling with the problem of pushing updated data from one widget to another. This problem occurs when I have two Stateful widgets and the data is updated in the parent Stateful widget but is not updated in the child Stateful widget. The error occurs with the usage of the freezed package but also occurs without it as well.
I have not been able to find anything that fixes this as of yet.
Below is an example:
First Stateful Widget:
class FirstWidget extends StatefulWidget {
#override
_FirstWidgetState createState() => _FirstWidgetState();
}
class _FirstWidgetState extends State<FirstWidget> {
ItemBloc _itemBloc = getit<ItemBloc>();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
elevation: Mquery.width(context, 2.5),
backgroundColor: Colors.black
title: Text(
'First stateful widget',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: BlocBuilder<ItemsBloc,ItemsState>(
cubit: _itemsBloc,
builder: (BuildContext context,ItemState state) {
return state.when(
initial: () => Container(),
loading: () => Center(child: CustomLoader()),
success: (_items) {
return AnotherStatefulWidget(
items: _items,
...
);
},
);
},
));
},
);
);
}
}
Second Stateful Widget:
class AnotherStatefulWidget extends StatefulWidget {
final List<String> items;
AnotherStatefulWidget(this.items);
#override
_AnotherStatefulWidgetState createState() => _AnotherStatefulWidgetState();
}
class _AnotherStatefulWidgetState extends State<AnotherStatefulWidget> {
final ScrollController scrollController = ScrollController();
ItemsBloc _itemsBloc = getit<ItemsBloc>();
bool _handleNotification(ScrollNotification notification, List<String> items) {
if (notification is ScrollEndNotification &&
scrollController.position.extentAfter == 0.00) {
_itemsBloc.add(ItemsLoadEvent.loadMoreItems(
categories: items, document: ...));
}
return false;
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: double.infinity,
height: 280,
child: Padding(
padding: EdgeInsets.only(
right: 8,
),
child: NotificationListener<ScrollNotification>(
onNotification: (_n) =>
_handleNotification(_n, widget.items),
child: DraggableScrollbar.arrows(
alwaysVisibleScrollThumb: true,
controller: scrollController,
child: ListView.builder(
controller: scrollController,
itemCount: widget.items.length,
itemBuilder: (context, index) {
return GestureDetector(
child: Padding(
padding: EdgeInsets.all(16),
child: Align(
alignment: Alignment.center,
child: Text(
widget.items[index],
style: TextStyle(color: Colors.white),
)),
),
);
},
),
),
),
),
)
],
),
),
),
);
}
}
I would really appreciate any help!
Thank you for you time,
Matt
I am creating an e-commerce app where homepage is kind of page where all fields like categories and other info is given.
here is my flow of screens ...
HomeScreen -> CategoryPage -> ProductByCategory -> ProductLandingPage
I am getting error. New to Coding and learning Providers for 1st time, Not able to resolve this issue.
Error: Could not find the correct Provider above this ProductLandingPage Widget
To fix, please:
Ensure the Provider is an ancestor to this ProductLandingPage Widget
Provide types to Provider
Provide types to Consumer
void main() {
runApp(MaterialApp(
home: MultiProvider(
providers: [
ChangeNotifierProvider.value(
value: Cart(),
)
],
child: HomeScreen(),
),
debugShowCheckedModeBanner: false,
));
}
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text('Factory2Homes'),
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () {}),
Consumer<Cart>(
builder: (_, cart, ch) => Badge(
child: ch,
value: cart.itemCount.toString(),
),
child: IconButton(
icon: Icon(
Icons.shopping_cart,
),
onPressed: () {
},
),
),
],
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(height: 500, child: CategoryPage()),
],
),
),
);
}
}
class CategoryPage extends StatefulWidget {
#override
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<AllCategory>>(
future: getCategoryList(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? ListOfCategories(
categories: snapshot.data,
)
: Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
));
},
);
}
}
class ListOfCategories extends StatelessWidget {
final List<AllCategory> categories;
ListOfCategories({this.categories});
#override
Widget build(BuildContext context) {
return GridView.builder(
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: categories.length,
itemBuilder: (context, index) {
return InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => ProductByCategory(category: categories[index],)));
},
child: Image.network(categories[index].categoryIcon));
},
);
}
}
class ProductByCategory extends StatefulWidget {
final AllCategory category;
final CarouselSlider carouselslider;
ProductByCategory({this.category, this.carouselslider});
#override
_ProductByCategoryState createState() => _ProductByCategoryState();
}
class _ProductByCategoryState extends State<ProductByCategory> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
Consumer<Cart>(
builder: (_, cart, ch) => Badge(
child: ch,
value: cart.itemCount.toString(),
),
child: IconButton(
icon: Icon(
Icons.shopping_cart,
),
onPressed: () {
},
),
),
IconButton(icon: Icon(Icons.search), onPressed: () {}),
],
),
body: FutureBuilder<List<Product>>(
future: getCategoryByProduct(http.Client(), widget.category.id),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
if (snapshot.hasData) {
return ProductByCategoryScreen(
product: snapshot.data,
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
);
}
}
class ProductByCategoryScreen extends StatefulWidget {
final List<Product> product;
ProductByCategoryScreen({this.product});
#override
_ProductByCategoryScreenState createState() =>
_ProductByCategoryScreenState();
}
class _ProductByCategoryScreenState extends State<ProductByCategoryScreen> {
#override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: widget.product.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ProductLandingPage(widget.product[index])));
},
child:
Card(child: Image.network(widget.product[index].productPhoto)));
},
);
}
}
class ProductLandingPage extends StatefulWidget {
final Product product;
ProductLandingPage(this.product);
#override
_ProductLandingPageState createState() => _ProductLandingPageState();
}
class _ProductLandingPageState extends State<ProductLandingPage> {
#override
Widget build(BuildContext context) {
final cart = Provider.of<Cart>(context, listen: false);
return Scaffold(
appBar: AppBar(
actions: <Widget>[
],
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: Colors.green,
height: MediaQuery.of(context).size.height / 2,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Image.network(widget.product.productPhoto),
),
),
Divider(
thickness: 1,
),
Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(this.widget.product.productName),
),
),
Divider(),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
'₹' + '${this.widget.product.productSalePrice}',
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w500),
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Center(
child: Text(
'MRP:' + '${this.widget.product.productListPrice}'),
),
),
],
),
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
'Description',
style:
TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
),
],
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(this.widget.product.productDescription),
),
),
],
),
),
bottomNavigationBar: Container(
width: MediaQuery.of(context).size.width,
height: 45.0,
child: RaisedButton(
onPressed: () {
cart.addItem(
'${widget.product.productId}',
widget.product.productListPrice,
widget.product.productName,
);
},
color: Colors.redAccent,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
"ADD TO CART",
style: TextStyle(color: Colors.white),
),
],
),
),
),
));
}
}
class CartItem {
final String id;
final String title;
final int quantity;
final int price;
CartItem({
this.id,
this.title,
this.quantity,
this.price,
});
}
class Cart with ChangeNotifier {
Map<String, CartItem> _items;
Map<String, CartItem> get items {
return {..._items};
}
int get itemCount{
return _items==null ?0 :_items.length;
}
void addItem(
String productId,
int productListPrice,
String productName,
) {
if (_items.containsKey(productId)) {
_items.update(
productId,
(existingCartItem) => CartItem(
id: existingCartItem.id,
title: existingCartItem.title,
price: existingCartItem.price,
quantity: existingCartItem.quantity + 1,
));
} else {
_items.putIfAbsent(
productId,
() => CartItem(
id: DateTime.now().toString(),
title: productName,
price: productListPrice,
quantity: 1,
));
}
}
}
The idea of Provider is to lift the state management above the widgets so different children can easily access its state. So it would be helpful if you moved the HTTP request from the widget tree (where it will be called every time the UI updates, so users use more bandwidth than needed) to a provider that is created above the tree. Therefore the state doesn't need to passed around from widget to widget.
Try watching this amazing talk from the flutter team to get a better understanding of how to use provider: https://youtu.be/d_m5csmrf7I
Bdw read this StackOverflow answer about why .value isn't what you desire: How to deal with unwanted widget build?
So you should make the app like this
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => Cart(),
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Factory2Homes',
home: HomeScreen(),
),
);
}
}
i got it working by changing main.dart code to below code:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider.value(value: Cart(),
child:MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Factory2Homes',
home: HomeScreen(),
),);
}
}