I created Appbar component and calling in every inner page, Now I need to implement dynamic value here for the cart dynamic count when I am trying to call a future function or set state also not working here it gives me error because of state widget i am not using, if anyone has an example for the same that will appreciable.
class AppBarComponent extends AppBar {
final _formKey = new GlobalKey<FormState>();
AppBarComponent({Key key})
: super(
key: key,
backgroundColor: Colors.greenAccent,
centerTitle: true,
title: Image.asset(
'images/logo.png',
width: 120.0,
//height: 20.0,
//fit: BoxFit.cover
),
actions: <Widget>[
new IconButton(
icon: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8.0,top: 4.0),
child: Icon(Icons.shopping_cart,color: Colors.white,),
),
Positioned(
top: 0.0,
right: 1.0,
child: new Stack(
children: <Widget>[
Icon(Icons.brightness_1, size: 16.0, color: Colors.red[800]),
Positioned(
top: 1.0,
right: 4.0,
child: new Text("2",
style: new TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.w500)),
)
],
),
)
]
)
),
],
);
}
You could pass an integer like totalCartItems with the constructor.
Like
AppBarComponent({Key key, int totalCartItems})
and use the same later as
Positioned(
top: 1.0,
right: 4.0,
child: new Text(totalCartItems.toString,
style: new TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.w500)),
)
Now if you will update the state of totalCartItems in your state class, the same will be reflected in your appBar. Just make to a single instance to totalCartItems.
Related
i'm a beginner in flutter and still trying to figure my way around. So i'm trying to build this app(i attached the image below), but I'm finding it difficult to get the gridview into a container and curve the edges of the container or include a border. I tried using Flexible instead to wrap the gridview, but i can't curve the edges with that or put a border.
import 'package:general_quizz/models/first_screen_data.dart';
import 'package:general_quizz/widgets/sectionBoxed.dart';
class Sections extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('quizz app'),
),
body: Column(
children: [
Container(
width: double.infinity,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Text('Quizz app')),
Container(
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
Flexible(
child: GridView(
children: DUMMY_CATEGORIES
.map(
(catData) => SectionBoxed(
catData.title,
catData.color,
catData.id,
),
)
.toList(),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
),
),
),
],
),
);
}
}```
This is what I'm trying to recreate. [this][1]
[I'm trying to recreate this][2]
[1]: https://i.stack.imgur.com/GSl11.jpg
[2]: ![]https://i.stack.imgur.com/3fWCz.jpg
you have to use Container widget like this:
Container(
child:...,
height:200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
)),
);
I have been experimenting with Flutter trying to recreate an app that I wrote for Android 5 years ago. But I can't seem to get the layout to work very well.
I have tried a number of different widgets, but each time I try something, it seems like I am taking 2 steps forward and 3 steps back.
The app is going to be vertical position only.
Simple banner image at the top.
A trivia question.
Radio button group with 4 answers.
Then 2 buttons - 'Check Answer' and 'Skip Question'
Bottom bar
I am trying to make sure that the radio buttons and the buttons don't bounce around when the question changes.
This is what I have
This is what I would like
And this is the code that I have been fighting with.
Any help or tips would be greatly appreciated.
class _MyHomePageState extends State<MyHomePage> {
final TriviaBloc _triviaBloc = TriviaBloc();
TriviaQuestion _initTriviaQuestion = new TriviaQuestion('', '', '', '', '', 1, 1);
String _selectedAnswer = "";
TextStyle _answerStyle = new TextStyle(textBaseline: TextBaseline.alphabetic, fontStyle: FontStyle.normal, fontFamily: 'QarmicsansAbridged', fontSize: 16);
#override
void dispose() {
_triviaBloc.dispose();
super.dispose();
}
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.orangeAccent,
body: SafeArea(
minimum: const EdgeInsets.all(16.0),
child:
Column(children: [
ImageBanner("assets/header_2.jpg"),
Expanded(
child:
StreamBuilder<TriviaQuestion>(
initialData: _triviaBloc.getInitialTriviaQuestion(),
//_initTriviaQuestion,
stream: _triviaBloc.triviaQuestionStream,
//initialData: _triviaBloc.getInitialTriviaQuestion(),
//builder: (BuildContext context, AsyncSnapshot<TriviaQuestion> snapshot)
builder: (BuildContext context, snapshot) {
//_triviaBloc.getTriviaQuestion(snapshot, context);
if (snapshot.data != null) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(height: 15),
Padding(
padding: EdgeInsets.all(2.0),
child: TriviaAutoSizeText(context, snapshot.data.Question),
),
RadioButtonGroup(
labels: <String>[
snapshot.data.IncorrectAnswer1,
snapshot.data.IncorrectAnswer2,
snapshot.data.CorrectAnswer,
snapshot.data.IncorrectAnswer3
],
labelStyle: _answerStyle,
onSelected: (String selected) => _selectedAnswer = selected),
//),
SizedBox(height: 10),
new InkWell(
onTap: () => {_triviaBloc.checkAnswer(QuestionAnswered(_selectedAnswer))},
child: new Container(
width: MediaQuery.of(context).size.width * 0.5,
height: 50.0,
decoration: new BoxDecoration(
color: _butttonInteriorColour,
//Colors.blueAccent,
border:
new Border.all(color: Colors.white, width: 1.0),
borderRadius: new BorderRadius.circular(20.0),
),
child: new Center(
child: new Text(
'Check Answer',
style: new TextStyle(
fontSize: 18.0, color: Colors.white),
),
),
),
),
SizedBox(height: 10),
new InkWell(
onTap: () =>
{_triviaBloc.getTriviaQuestion(snapshot, context)},
child: new Container(
width: MediaQuery.of(context).size.width * 0.5,
height: 50.0,
decoration: new BoxDecoration(
color: _butttonInteriorColour,
//Colors.blueAccent,
border:
new Border.all(color: Colors.white, width: 1.0),
borderRadius: new BorderRadius.circular(20.0),
),
child: new Center(
child: new Text(
'Next Question',
style: new TextStyle(
fontSize: 18.0, color: Colors.white),
),
),
),
),
],
);
} else {
return Center(child: CircularProgressIndicator());
}
;
}),
)]),
),
bottomNavigationBar: buildBottomNav(context),
);
}
}
So you want the 4 button group and the 2 buttons at the bottom without changing position ?
Maybe a Spacer will help with that
if (snapshot.data != null) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max, //replace this to fill everything
children: <Widget>[
SizedBox(height: 15),
Padding(
padding: EdgeInsets.all(2.0),
child: TriviaAutoSizeText(context, snapshot.data.Question),
),
Spacer(), //add the spacer here
RadioButtonGroup(
labels: <String>[
I am trying to use SliverAppBar. The layout was fine on the phone devices. However, when I use the iPad to test the layout, it seems that the height of the AppBar does not change, and it could not show the title text properly .
When I collasped the AppBar:
I tried too add the bottom attribute to the SliverAppBar, but it doesn't works too.
bottom: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: Text(''),
),
and the result looks like this:
the title text is still restricted with an invisible height.
my code:
new SliverAppBar(
expandedHeight: Adapt.px(220.0),
floating: false,
elevation: 0.0,
pinned: true,
primary: true,
centerTitle: true,
title: Text("TITLE",
style: TextStyle(
color: Colors.white,
fontSize: Adapt.px(45.0),
fontFamily: "pinfon",
fontWeight: FontWeight.w900,
letterSpacing: 1.0)),
backgroundColor: Colors.black45,
brightness: Brightness.dark,
bottom: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: Text(''),
),
flexibleSpace: new FlexibleSpaceBar(
background: Opacity(
opacity: 0.5,
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Image.asset(
"assets/images/back.jpg",
fit: BoxFit.fitWidth,
),
],
),
),
),
),
I have tested the sample code you have provided and it seems that the layout is working fine when with an iPad Air - 4th generation - 14.0 emulator.
Though, I'm not able to see your complete code. I've just reused the minimal code you have provided and created a complete example to be able to see the output.
Here is my sample code:
import 'package:flutter/material.dart';
void main() => runApp(SilverAppBarExample());
class SilverAppBarExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
expandedHeight: 220.0,
floating: false,
elevation: 0.0,
pinned: true,
primary: true,
centerTitle: true,
title: Text("TITLE",
style: TextStyle(
color: Colors.white,
fontSize: 45.0,
fontFamily: "pinfon",
fontWeight: FontWeight.w900,
letterSpacing: 1.0)),
backgroundColor: Colors.black45,
brightness: Brightness.dark,
bottom: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: Text(''),
),
flexibleSpace: new FlexibleSpaceBar(
background: Opacity(
opacity: 0.5,
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Image.asset(
"assets/background.jpg",
fit: BoxFit.fitWidth,
),
],
),
),
),
),
new SliverList(
delegate: new SliverChildListDelegate(_buildList(50))),
],
),
),
);
}
List _buildList(int count) {
List<Widget> listItems = List();
for (int i = 0; i < count; i++) {
listItems.add(new Padding(
padding: new EdgeInsets.all(20.0),
child: new Text('Item ${i.toString()}',
style: new TextStyle(fontSize: 25.0))));
}
return listItems;
}
}
Output using iPad Air - 4th generation - 14.0 emulator
Expanded:
Shrinked:
It seems that the SliverAppBar is working fine.
I've also tested it in an iPhone emulator for verification.
iPhone SE - 2nd generation - 14.0
Expanded:
Shrinked:
Here is a live output:
Maybe if you could provide the whole code you've created we will be able to check it on our end.
someone help me please enter image description here
https://imgur.com/yGEzU2n
i need the box resized automatically fot the content.
i'm new in flutter any suggestions?
bodyWidget(BuildContext context) => Stack(
children: <Widget>[
Positioned(
height: MediaQuery.of(context).size.height / 1.5, //Altura del box cone squinas redondeadas
width: MediaQuery.of(context).size.width - 20,
left: 10.0,
top: MediaQuery.of(context).size.height * 0.1,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(
height: 130.0, // espacion entre el texto de la descripcion y la foto del producto
),
Use resizeToAvoidBottomPadding: false . Read about it here.
First Solution:
you usually need to provide a scroll widget on top of your widgets because if you try to open the keyboard or change the orientation of your phone, flutter needs to know how to handle the distribution of the widgets on the screen.
Please review this resource, you can check the different options that flutter provide Out of the box, and choose the best option for your scenario.
Scrolling
Second Option:
resizeToAvoidBottomPadding: false
That should make the error disappear
You can see through a sample code :
appBar: new AppBar(title: new Text('Create A Parking Slot')),
body: new Center(
child: new SingleChildScrollView(
child: new Container(
margin: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 10.0),
color: Colors.white,
child: new Column(children: <Widget>[
new TextField(
decoration: InputDecoration(labelText: "Title*"),
),
new TextField(
decoration: InputDecoration(labelText: "Available Space in Sqft*"),
),
new TextField(
decoration: InputDecoration(labelText: "Available Space*"),
),
new TextField(
decoration: InputDecoration(labelText: "Address*"),
),
new TextField(
decoration: InputDecoration(labelText: "Contact Number*"),
),
new ListTile(
title: const Text('Select Your Plan'),
trailing: new DropdownButton<String>(
value: "Hourly",
onChanged: (String newValue) {
print(newValue);
},
items:
<String>['Hourly', 'Weekly', 'Monthly'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
),
),
new Container(
height: 1.0,
width: width,
color: Colors.grey,
),
new TextField(
decoration: InputDecoration(labelText: "Rate*"),
),
new UploadImage(),
new RaisedButton(
child: const Text('Create'),
color: Theme.of(context).accentColor,
textColor: Colors.white,
elevation: 4.0,
splashColor: Colors.blueGrey,
onPressed: () {
// Perform some action
//button1(context);
},
)
//
]),
)))
I have a problem with my Flutter Layout.
I have a simple container with a Margin right and left of 20.0
Inside this container i have another container.
But this container does not fit to the parent container only on the left side.
I dont know why this happens.
Here is my Code:
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
body: new Container(
margin: new EdgeInsets.symmetric(horizontal: 20.0),
child: new Container(
)
),
);
}
Screenshot of the Problem
You can use left and right values :)
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Container(),
),
);
}
You can try: To the margin of any one edge
Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Container()
)
You can try :To the margin of any all edge
Container(
margin: const EdgeInsets.all(20.0),
child: Container()
)
If you need the current system padding or view insets in the context of a
widget, consider using [MediaQuery.of] to obtain these values rather than
using the value from [dart:ui.window], so that you get notified of changes.
Container(
margin: EdgeInsets.fromWindowPadding(padding, devicePixelRatio),
child: Container()
)
Container(
margin: EdgeInsets.all(10) ,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black.withAlpha(0),
Colors.black12,
Colors.black45
],
),
),
child: Text(
"Foreground Text",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
You can try to set margin in the following ways.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container (
// Even margin on all sides
margin: EdgeInsets.all(10.0),
// Symetric margin
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
// Different margin for all sides
margin: EdgeInsets.fromLTRB(1.0, 2.0, 3.0, 4.0),
// Margin only for left and right sides
margin: const EdgeInsets.only(left: 10.0, right: 10.0),
// Different margin for all sides
margin: EdgeInsets.only(left: 5.0, top: 10.0, right: 15.0, bottom: 20.0),
child: Child
(
...
),
),
);
}