I used two circular avatar (the first one with a white background just a little bigger to create a white border).
Also the second one have the background property set to white.
However before the image is loaded I see a blue background. As you can see form the code there are no one blu widget on the back...
I wold like to have a black or white background while the widget is loading the picture.
return Scaffold(
backgroundColor: Colors.white,
body: Container(
padding: const EdgeInsets.only(top: 30),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: appColor,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 0,
height: 20,
),
const Center(
child: Text(
'WhyBye ',
style: TextStyle(
color: Colors.white,
fontFamily: 'Savor',
fontSize: 40,
),
),
),
const SizedBox(
width: 0,
height: 10,
),
Stack(
//& Stack contenente l'immagine del profilo.
children: [
_image != null
? CircleAvatar(
radius: 100,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 96,
backgroundImage: MemoryImage(_image!),
))
: CircleAvatar(
radius: 100,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 96,
backgroundImage: Variables.userPicUrl.isNotEmpty
? NetworkImage(Variables.userPicUrl)
: null,
)),
Positioned(
//& All'interno del precedente Stack, posizionamento dei pulsanti immagine dalla galleria/fotocamera.
bottom: -10,
left: 15,
child: IconButton(
onPressed: () {
selectImage(ImageSource.gallery);
},
icon: const Icon(Icons.photo_library_rounded),
color: Colors.white,
iconSize: 32,
),
),
Positioned(
bottom: -10,
left: 135,
child: IconButton(
onPressed: () {
selectImage(ImageSource.camera);
},
icon: const Icon(Icons.add_a_photo),
color: Colors.white,
iconSize: 32,
),
),
Following the documentation of CircleAvatar:
If a backgroundColor is not specified, the theme's ThemeData.primaryColorLight is used with dark foreground colors, and ThemeData.primaryColorDark with light foreground colors.
I think you're using the default theme (which uses blue as primary color). Try to explicitly define s transparent color to the inner circle so while it's loading you only see the color of the outer circle
I think you need to add
Blockquote
foregroundImage
ImageProvider?
The foreground image of the circle. [...]
you could decide to use a dark image
Related
I have this AppBarWidget and I need to change the arrow back logo to my custom svg icon. I'm new in flutter and I can't find how to change it.
Here is code for AppBar
return AppBar(
elevation: 0,
backgroundColor: white,
foregroundColor: black,
shadowColor: Colors.transparent,
toolbarHeight: 80,
titleTextStyle: getCustomeStyle(
fontSize: 25, fontWeight: FontWeight.w700, color: black),
title: FittedBox(
fit: BoxFit.fill,
child: SizedBox(
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title),
SvgPicture.asset("assets/images//logo/ShopIO.svg",
semanticsLabel: "ShopIO")
],
),
)),
bottom: PreferredSize(
child: Container(
color: lightGray,
height: 1.0,
width: _width - 30,
),
preferredSize: const Size.fromHeight(0)),
);
The easiest way is to override the deafult leading widget of AppBar and add your custom:
AppBar(
leading: IconButton(
icon: <whatever you like>,
// this is the default behaviour, you can change it
onPressed: () => Navigator.of(context).pop()
),
I faced with this problem: I found the only way to do so that the background of the button was in full height when using safearea on iPhone 11. But now the button is pressed partially podskajet. Please how to make the entire blue area pressed as a button. Thank you all for your answers.
I add a screenshot and a piece of code as it is implemented now.
Container(
color: Colors.blue,
child: SafeArea(
left: false,
right: false,
child: Expanded(
flex: 1,
child: SizedBox(
width: double.infinity,
child: RaisedButton(
elevation: 0,
onPressed: () {},
child: Text("Add", style: TextStyle(color: Colors.white)),
color: Colors.blue,
),
),
),
),
),
You can check by changing the color of this Container.
Container(
color: Colors.red,
Or you can use Debug Paint using the inspector. And then you will realize that some area is not in the button. This is the reason why onTap is not working.
After that time you can use InkWell easily with wrapping all your Container.
InkWell(
onTap: () {
// Here is your onTap function
},
Container(
color: Colors.red,
child: SafeArea(
left: false,
right: false,
child: Expanded(
flex: 1,
child: SizedBox(
width: double.infinity,
// In fact, you don't need a button anymore.
child: RaisedButton(
elevation: 0,
onPressed: () {},
child: Text("Add", style: TextStyle(color: Colors.white)),
color: Colors.blue,
),
),
),
),
),
),
I need to put icon into CircleAvatar Widget to allow user upload his image.
Something like this:
This is my code:
child: CircleAvatar(
child: Stack(
children: <Widget>[
Positioned(
bottom: 0,
right: 0,
left: 0,
height: 33,
child: Container(
height: 20,
width: 30,
color: Color.fromRGBO(0, 0, 0, .74),
child: Center(
child:
Icon(Icons.photo_camera, color: Colors.grey),
),
),
)
],
),
radius: 68.0,
backgroundImage:
NetworkImage('https://via.placeholder.com/300'),
backgroundColor: Colors.transparent,
)
But I have this result:
Internal box with camera icon overflow from parent widget (CircleAvatar);
What you want can be simply done with - ClipOval
Your Code:
body: Center(
child: CircleAvatar(
child: ClipOval(
child: Stack(
children: <Widget>[
Image.network('https://via.placeholder.com/300'),
Positioned(
bottom: 0,
right: 0,
left: 0,
height: 33,
child: GestureDetector(
onTap: (){
print('upload Clicked');
},
child: Container(
height: 20,
width: 30,
color: Color.fromRGBO(0, 0, 0, .74),
child: Center(
child: Icon(Icons.photo_camera, color: Colors.grey),
),
),
),
),
],
),
),
radius: 68.0,
// backgroundImage: NetworkImage('https://via.placeholder.com/300'),
backgroundColor: Colors.transparent,
),
),
Output:
You can create your Custom Clipper to give the circular bottom to your widget.
You need to use the ClipPath widget for it, pass your widget in your case Container containing your camera icon.
and in clipper pass your CustomClipper.
ClipPath
return ClipPath(
child: your_widget,
clipper: BottomWaveClipper(),
);
CustomCliper
class BottomCircleClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
//your path to draw circle
}
#override
bool shouldReclip(TriangleClipper oldClipper) => false;
}
Here are some links that will help you.
https://iirokrankka.com/2017/09/04/clipping-widgets-with-bezier-curves-in-flutter/
https://medium.com/flutter-community/clipping-in-flutter-e9eaa6b1721a
I'm trying to maximize the screen as there is an unused white gap at the bottom (below the green bar which is the countdown/timer for the qn) :
Code:
final quizBottomContentText = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left:30.0, right:30.0, top: 30.0, bottom: 30),
child: Text(
questions[questionNum].title,
style: TextStyle(fontSize: 18.0),
)
);
final quizOptions = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 40.0, right:40.0, bottom: 40.0),
child: Center(
child: Column(
children: questions[questionNum].options.map<Widget>(
(option) => SimpleRoundButton(
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
buttonText: Text(option,
style: TextStyle(
color: Colors.white
),
),
textColor: Colors.white,
onPressed: (){},
),
).toList(),
)
)
);
final countdown = CountdownWidget(
width: MediaQuery.of(context).size.width,
duration: 20,
triviaState: triviaState,
);
final quizBottomContent = Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[quizBottomContentText, quizOptions, countdown], // need countdown
),
);
I've been trying the following but I cant seem to get what I want:
// Column for quizBottomContent
mainAxisAlignment: MainAxisAlignment.spaceBetween,
Wrap your bottom widget in Column inside Expanded (I think, this is what you want)
Suppose you have a few nested InkResponse, if you tap on the inner one, all of the parent will actually trigger the splash effect even though they will loose in the tap arena for the right tapped widget. The effect will be something like this:
How to prevent such behavior? How to display the splash only for the tapped widget? In this example image it's being used a Container > Row (with InkReponse) > Icon (also with InkResponse). This will also happen if you use material buttons.
You might want to try IgnorePointer
I encourage you to use Stack widget because you can be able to put together multiple widgets. Here there is an example of a container with inner container and they are both clickable independently,
Stack(
children: [
InkWell(
onTap: (){},
child: Container(
width: 400,
height: 400,
color: Colors.green,
),
),
Positioned(
top: 30,
left: 20,
child: InkWell(
onTap: (){},
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
))
],
)
This worked for me
Center(
child:Container(
width: 100,
height: 100,
child: Card(
child: InkWell(
splashColor: color3,
onTap: () {
},
child: Column(
children: [
SizedBox(
height: 10,
),
IconButton(
splashRadius: 7,
splashColor: Colors.pink,
onPressed: () {},
icon: SvgPicture.asset(
ImageConst.bellIcon,
width: 20,
height: 20,
color: Colors.black,
),
),
SizedBox(
height: 10,
),
Text("text"),
],
),
),
),
),
)
Try to wrap the icon into GestureDetector with the empty handler + Padding.