Related
This is my source code:
Scaffold(
body: Center(
child: Container(
color: Colors.green,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
fit: FlexFit.loose, child: Image.asset('images/demo.png')),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Container(
color: Colors.yellow,
child: Text('Cancel'),
),
),
Expanded(
child: Container(
color: Colors.red,
child: Text('Okay'),
),
),
],
),
],
),
),
),
);
This is the result:
I want it to be like this:
without using fixed sizes because the image dimensions may vary.
I already tried to use flexible on the row children. The problem with that solution is that the green container is being expanded like this:
which I don't want to happen.
EDIT, Did a little more searching and found what you seem to be looking for:
The IntrinsicWidth widget makes sure children have uniform width, which will be the width of the widest element (without the overlapping issue like in the Stack widget based solution). So this code accomplishes what you're trying to do:
Scaffold(
body: Center(
child: IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Image.asset('images/demo.png'),
),
Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.yellow,
child: Text('Cancel'),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.red,
child: Text('Okay'),
),
),
],
),
],
),
),
),
);
Screenshot:
OLD ANSWER:
If you don't mind overlapping a little bit of the bottom of the image with the buttons, the stack class sizes itself to its non positioned children, so this would work for you:
Scaffold(
body: Center(
child: Stack(
fit: StackFit.loose,
children: [
Image.asset('images/demo.png'),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.yellow,
child: Text('Cancel'),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.red,
child: Text('Okay'),
),
),
],
),
),
],
),
),
);
Screenshot:
Maybe this will help.
You can use Spacer(); between the two text Cancel & Okay. Spacer() will put second text to end of row.
Row(
children[
Container(child: Text('Cancel', style...)),
Spacer(),
Container(Text('Okay', style...)),
]
);
maybe you can get the width of the image and pass it to the container that wraps the column:
import 'dart:io';
File image = new File('image.png'); // Or any other way to get a File instance.
var decodedImage = await decodeImageFromList(image.readAsBytesSync());
final width = decodedImage.width;
I am just trying to display the camera's preview and align the user to take a selfie.
I have the following snippet of code and I would like to make the person's image transparent (not white) and fill the surrounding area with color.
but the problem that I am facing, if I set the SVG with transparent color, it will display the color of the parent (container),
I need to make the person's image totally transparent to see the camera's preview with filling the surrounding area with color.
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
child: Center(
child: _cameraPreviewWidget(),
),
),
Container(
height: MediaQuery.of(context).size.height,
color: Colors.grey[700].withOpacity(0.8),
child: Align(
alignment: Alignment.bottomCenter,
child: SvgPicture.asset(
'assets/svg/selfie_person.svg',
alignment: Alignment.bottomCenter,
fit: BoxFit.cover,
color: Colors.white,
),
),
),
Container(
height: MediaQuery.of(context).size.height,
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.05,
bottom: MediaQuery.of(context).size.height * 0.15,
),
child: Column(
children: [
ListTile(
leading: InkWell(
onTap: () {
Navigator.pop(context, null);
},
child: FaIcon(
FontAwesomeIcons.arrowLeft,
color: Colors.white,
),
),
title: Center(
child: Text(
"Take a selfie",
style: Theme.of(context).textTheme.subtitle2,
),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.05,
),
child: Text(
"Take a quick selfie so we know it's you, this is never public",
style: Theme.of(context).textTheme.subtitle2,
overflow: TextOverflow.ellipsis,
maxLines: 3,
textAlign: TextAlign.center,
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: _captureButton(),
),
),
],
),
),
),
],
),
),
);
I don't understand your question well, but i think you should try Opacity class .. wrap your SVG with Opacity
You can check it :
https://api.flutter.dev/flutter/widgets/Opacity-class.html
and thank you in advance for any assistance.
So, I have images load properly when I use them within a container in other areas of the code, but I also want some of those images to display randomly within the AppBar.
Given that they do load in other locations within the code, I don't suspect a Pubyaml error.
I'm still fairly new to flutter, and lists in general. So I wouldn't be surprised if I messed up something with the list itself, or the way it's called.
It gives me this error:
Syncing files to device iPhone...
Reloaded 8 of 502 libraries in 411ms.
════════ Exception caught by image resource service ════════════════════════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: Image(image: AssetImage(bundle: null, name: "images/Mem2.JPG"), frameBuilder: null, loadingBuilder: null, alignment: center, this.excludeFromSemantics: false, filterQuality: low)
When the exception was thrown, this was the stack:
#0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
<asynchronous suspension>
#1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44)
#2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14)
#3 ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
...
Image provider: AssetImage(bundle: null, name: "Image(image: AssetImage(bundle: null, name: "images/Mem2.JPG"), frameBuilder: null, loadingBuilder: null, alignment: center, this.excludeFromSemantics: false, filterQuality: low)")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#c99db(), name: "Image(image: AssetImage(bundle: null, name: "images/Mem2.JPG"), frameBuilder: null, loadingBuilder: null, alignment: center, this.excludeFromSemantics: false, filterQuality: low)", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════
Here's the code:
class ContactProfilePage extends StatefulWidget {
#override
_ContactProfilePageState createState() => _ContactProfilePageState();
}
class _ContactProfilePageState extends State<ContactProfilePage> {
List<Attr> attr = [
Attr(name: ''),
];
dynamic randAppBarImg = [
"images/Mem2.JPG",
"images/Mem3.JPG",
"images/Mem4.JPG",
"images/Mem6.jpg",
"images/memory - 1.jpeg",
"images/memory - 2.jpeg",
"images/memory - 3.jpeg",
"images/memory - 4.jpeg",
"images/memory - 5.jpeg",
"images/memory - 6.jpeg",
];
Random rnd;
Image img() {
int min = 0;
int max = randAppBarImg.length - 1;
rnd = Random();
int r = min + rnd.nextInt(max - min);
String image_name = randAppBarImg[r].toString();
return Image.asset(image_name);
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.lightBlueAccent,
child: Icon(Icons.add),
onPressed: () {
//Modal sheet brings up the whole bottom pane when the plus button is pressed.
showModalBottomSheet(
context: context,
builder: (context) => AddAttrScreen(
(newAttrTitle) {
setState(() {
//adds the Attr to the list anytime the user presses "Add"
attr.add(Attr(name: newAttrTitle));
});
Navigator.pop(context);
//Hides the floating add Attr screen after pressing "Add"
},
),
);
//TODO Change it so the categories don't have to be selected every time. Instead, have the add button WITHIN each category.
// This floating button should instead create a new category.
},
),
drawer: DrawerMain(),
body: NestedScrollView(
//This allows for the top bar to collapse, while retaining the image.
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: true,
snap: true,
pinned: true,
flexibleSpace: Stack(
children: <Widget>[
Positioned.fill(
child: Image.asset(
img().toString(),
fit: BoxFit.cover,
))
],
),
),
];
},
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15.0),
child: CircleAvatar(
maxRadius: 50.0,
backgroundImage: AssetImage("images/fox.jpeg")),
),
Container(
//TODO ADD ON PRESSED FUNCTION TO SOCIAL ICONS
margin: EdgeInsets.all(15.0),
child: Icon(
FontAwesomeIcons.facebook,
size: 40.0,
color: Color(0xFF306060),
),
),
Container(
margin: EdgeInsets.all(15.0),
child: Icon(
FontAwesomeIcons.instagram,
size: 40.0,
color: Color(0xFF306060),
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Armando Pacheco Ortiz',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Color(0xFF306060)),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Freelance App Developer from Puerto Rico',
style: TextStyle(
fontSize: 20.0,
fontStyle: FontStyle.italic,
color: Color(0xFF306060)),
),
SizedBox(
child: Divider(),
),
],
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: <Widget>[
Text('Memories',
style: TextStyle(
fontSize: 20.0,
fontStyle: FontStyle.italic,
color: Color(0xFF306060),
fontWeight: FontWeight.bold))
],
),
),
//Horizontal scrolling images.
//TODO These need to update based on uploads, perhaps use something like google's face detection to auto add?
Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 310,
width: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: (Image.asset(
'images/Mem6.jpg',
fit: BoxFit.cover,
)),
),
),
SizedBox(
width: 20,
),
Container(
height: 310,
width: 200,
//ClipRRect allows for it to have the border radius. Container is painted behind the image.
//For that reason, adding a border radius to the container doesn't work.
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: (Image.asset(
'images/Mem2.JPG',
fit: BoxFit.cover,
)),
),
),
SizedBox(
width: 20,
),
Container(
height: 310,
width: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: (Image.asset(
'images/memory - 4.jpeg',
fit: BoxFit.cover,
)),
),
),
I pasted the code as far down as the first image, to show how I have it set up in the other locations.
I'm not sure if the issue is with random images within the appBar, or maybe some code I'm missing.
Hopefully, someone can shed some light on this!
Many thanks.
UPDATE:
So that helped a ton and definitely got things running! But I did notice two new problems cropping up.
I had to rename all the images from: "memory - 6" to "Mem6", and that finally allowed them to show up.
Otherwise, sometimes it would revert back to the default teal color, and not display anything, besides an error about not being able to load the asset again. I imagine it's just a naming error I was unknowingly causing?
Scrolling down will cause the Appbar to "refresh" again, and randomize the pictures with the slightest scrolling until you stop. If I scroll back up, it'll do it again. It doesn't create an error, but it does crash the app eventually from so much refreshing I guess.
How would I get around this? Is there an override, or should I simply create the widget with some Finals, or stateless/stateful widgets? I'm still learning the lingo and all that, so my apologies for the ignorance.
You can copy paste run full code below
Your img() has bug, you return an Image.asset and wrap in Image.asset again cause duplicate
Image.asset(
img().toString(),
fit: BoxFit.cover,
))
code snippet just return String of image_name will work
and do not include space in image name
String img() {
int min = 0;
int max = randAppBarImg.length - 1;
rnd = Random();
int r = min + rnd.nextInt(max - min);
String image_name = randAppBarImg[r].toString();
//return Image.asset(image_name);
return image_name;
}
working demo
full code
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:font_awesome_flutter/font_awesome_flutter.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: ContactProfilePage(),
);
}
}
class Attr {
String name;
Attr({this.name});
}
class ContactProfilePage extends StatefulWidget {
#override
_ContactProfilePageState createState() => _ContactProfilePageState();
}
class _ContactProfilePageState extends State<ContactProfilePage> {
List<Attr> attr = [
Attr(name: ''),
];
dynamic randAppBarImg = [
"images/Mem2.JPG",
"images/Mem3.JPG",
/*"images/Mem4.JPG",
"images/Mem6.jpg",
"images/memory-1.jpeg",
"images/memory-2.jpeg",
"images/memory-3.jpeg",
"images/memory-4.jpeg",
"images/memory-5.jpeg",
"images/memory-6.jpeg",*/
];
Random rnd;
String img() {
int min = 0;
int max = randAppBarImg.length - 1;
rnd = Random();
int r = min + rnd.nextInt(max - min);
String image_name = randAppBarImg[r].toString();
//return Image.asset(image_name);
return image_name;
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.lightBlueAccent,
child: Icon(Icons.add),
onPressed: () {
//Modal sheet brings up the whole bottom pane when the plus button is pressed.
/* showModalBottomSheet(
context: context,
builder: (context) => AddAttrScreen(
(newAttrTitle) {
setState(() {
//adds the Attr to the list anytime the user presses "Add"
attr.add(Attr(name: newAttrTitle));
});
Navigator.pop(context);
//Hides the floating add Attr screen after pressing "Add"
},
),
);*/
//TODO Change it so the categories don't have to be selected every time. Instead, have the add button WITHIN each category.
// This floating button should instead create a new category.
},
),
//drawer: DrawerMain(),
body: NestedScrollView(
//This allows for the top bar to collapse, while retaining the image.
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: true,
snap: true,
pinned: true,
/*flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.asset(
"images/Mem2.JPG",
fit: BoxFit.cover,
)),*/
flexibleSpace: Stack(
children: <Widget>[
Positioned.fill(
child: Image.asset(
img().toString(),
fit: BoxFit.cover,
))
],
),
),
];
},
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15.0),
child: CircleAvatar(
maxRadius: 50.0,
backgroundImage: AssetImage("images/fox.jpeg")),
),
Container(
//TODO ADD ON PRESSED FUNCTION TO SOCIAL ICONS
margin: EdgeInsets.all(15.0),
child: Icon(
FontAwesomeIcons.facebook,
size: 40.0,
color: Color(0xFF306060),
),
),
Container(
margin: EdgeInsets.all(15.0),
child: Icon(
FontAwesomeIcons.instagram,
size: 40.0,
color: Color(0xFF306060),
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Armando Pacheco Ortiz',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Color(0xFF306060)),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Freelance App Developer from Puerto Rico',
style: TextStyle(
fontSize: 20.0,
fontStyle: FontStyle.italic,
color: Color(0xFF306060)),
),
SizedBox(
child: Divider(),
),
],
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: <Widget>[
Text('Memories',
style: TextStyle(
fontSize: 20.0,
fontStyle: FontStyle.italic,
color: Color(0xFF306060),
fontWeight: FontWeight.bold))
],
),
),
//Horizontal scrolling images.
//TODO These need to update based on uploads, perhaps use something like google's face detection to auto add?
Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 310,
width: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: (Image.asset(
'images/Mem6.jpg',
fit: BoxFit.cover,
)),
),
),
SizedBox(
width: 20,
),
Container(
height: 310,
width: 200,
//ClipRRect allows for it to have the border radius. Container is painted behind the image.
//For that reason, adding a border radius to the container doesn't work.
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
'images/Mem2.JPG',
fit: BoxFit.cover,
),
),
),
SizedBox(
width: 20,
),
Container(
height: 310,
width: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: (Image.asset(
'images/memory-4.jpeg',
fit: BoxFit.cover,
)),
),
),
])))
]))));
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(
children: [
Container(
color: Colors.orange,
child: TextField(
decoration: InputDecoration(
suffix: IconButton(
icon: Icon(Icons.check_circle),
onPressed: () {
print('222');
}),
),
),
),
],
),
),
),
);
}
}
How can I force the check_circle icon to automatically resize to match the height of the actual TextField, i.e., wrt its cursor height?
Use suffixIcon instead.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(
children: [
Container(
color: Colors.orange,
child: TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.check_circle),
onPressed: () {
print('222');
}),
),
),
),
],
),
),
),
);
}
}
Very good question...
The basics, is to reset all the paddings in the TextField, and not using a IconButton (as all Material components have predefined and internals paddings that you can't modify).
Seems like suffix gets baseline aligned with the text, preventing the material ink interaction, while suffixIcons get properly centered in the text area, BUT propagates the Ink to the TextField.
So, so far I couldn't find a way of doing it properly, maybe there's a widget/logic that I'm missing.
Check screenshot at the bottom that shows why the suffix will not be able to align with the text, as it sits within the baseline itself, and the caret generates a bigger height.....
in the first 2 textfields, the GREY boxes are suffix, and yellow, suffixIcon (which centers properly).
Solution 1: (in screenshotm is red background with 2 checkboxes)
If you can (design-wise), make a row, and put the TextField and the icon:
var inputBorderDecoration = OutlineInputBorder(
borderRadius: BorderRadius.zero,
borderSide: BorderSide(width: 1, color: Colors.black));
double textHeight = 40;
// define a width if you want, or let the constrains of the parent define it.
double inputWidth = double.infinity;
return Center(
child: Container(
width: inputWidth,
height: textHeight,
color: Colors.green.withOpacity(.2),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Flexible(
child: TextField(
controller: TextEditingController(text: 'hello world'),
style: TextStyle(fontSize: textHeight),
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
enabledBorder: inputBorderDecoration,
focusedBorder: inputBorderDecoration,
filled: true,
fillColor: Colors.red.withOpacity(.5),
),
),
),
FittedBox(
child: InkWell(
onTap: () => print("touch button"),
child: Icon(Icons.check_circle),
),
),
],
)),
);
Solution 2: (in screenshot, last textfield, green box with white icon)
Wrap the icon decoration, is the better UI approach, but the TextField will .still receive touch events.
var inputBorderDecoration = OutlineInputBorder(
borderRadius: BorderRadius.zero,
borderSide: BorderSide(width: 1, color: Colors.black));
double fontSize = 24;
return GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Container(
color: Colors.green.shade50,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 300,
height: fontSize,
color: Colors.orange,
child: TextField(
style: TextStyle(fontSize: fontSize, color: Colors.white),
decoration: InputDecoration(
fillColor: Colors.purple.withOpacity(.5),
filled: true,
border: inputBorderDecoration,
focusedBorder: inputBorderDecoration,
enabledBorder: inputBorderDecoration,
contentPadding: EdgeInsets.zero,
suffixIcon: GestureDetector(
onTap: () => print('on tap'),
child: Container(
color: Colors.green,
child: FittedBox(
alignment: Alignment.center,
fit: BoxFit.fitHeight,
child: IconTheme(
data: IconThemeData(),
child: Icon(
Icons.check_circle,
color: Colors.white,
),
),
),
),
),
),
),
),
],
),
),
),
);
Solution 3:
Build the decorations yourself using EditableText
Used Stack
Stack(
children: [
TextField(),
Positioned.fill(
right: 10,
child: Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
searchController.clear();
},
child: Icon(Icons.clear))))
],
),
How can I change the background color of a flutter nav drawer?
There doesn't seem to be a color or background-color property.
When you build your ListView in the child property of your Drawer, you can wrap your different sections of the Drawer inside a Container and use the color property of the Container.
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new Container(child: new DrawerHeader(child: new CircleAvatar()),color: Colors.tealAccent,),
new Container (
color: Colors.blueAccent,
child: new Column(
children: new List.generate(4, (int index){
return new ListTile(
leading: new Icon(Icons.info),
);
}),
),
)
],
),
),
A better alternative if you already have a consistent coloring design in your mind, is to define your ThemeData under the theme property of the root of your app, the DrawerHeader and the body will follow your canvasColor, so you need to override the value of one of them to change the color:
return new MaterialApp(
....
theme: new ThemeData(
canvasColor: Colors.redAccent,
....),
)
Best way to wrap Drawer with Theme,
For example:
#override
Widget build(BuildContext context) {
return Scaffold(
//other scaffold items
drawer: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.blue, //This will change the drawer background to blue.
//other styles
),
child: Drawer(
child: Column(
children: <Widget>[
//drawer stuffs
],
),
),
);
}
The easiest way would probably be to just wrap the ListView inside a Container and specify its color like following:
drawer: Drawer(
child: Container(color: Colors.red,
child: new ListView(
...
)
)
)
For changing Drawer Header color use blow code
UserAccountsDrawerHeader(
accountName: Text("Ashish Rawat"),
accountEmail: Text("ashishrawat2911#gmail.com"),
decoration: BoxDecoration(
color: const Color(0xFF00897b),
),
currentAccountPicture: CircleAvatar(
backgroundColor: Theme.of(ctxt).platform == TargetPlatform.iOS
? const Color(0xFF00897b)
: Colors.white,
child: Text(
"A",
style: TextStyle(fontSize: 40.0),
),
),
),
You can just use this code;
drawer: Drawer(
child: Container(
//child: Your widget,
color: Colors.red,
width: double.infinity,
height: double.infinity,
),
)
PLAIN BACKGROUND
Just set your desired theme color using primarySwatch: Colors.brown property in ThemeData
class MyApp extends StatelessWidget {
final appTitle = 'Drawer Demo';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
theme: new ThemeData(
primarySwatch: Colors.brown, // Your app THEME-COLOR
),
home: MyHomePage(title: appTitle),
);
}
}
GRADIENT BACKGROUND
Add the gradient property to AppBar.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("profyl.org",
style: TextStyle(color: Colors.white),
textDirection: TextDirection.ltr),
flexibleSpace: Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
),
),
body: HomeListPage(),
drawer: DrawerPage());
}
Try This.
#override
Widget build(BuildContext context) {
return Drawer(
child: Container(
color: Colors.black,
child: ListView(
padding: const EdgeInsets.all(0),
children: [
],
),
),
);
}
}
This will help
drawer: Drawer(
child: Container(
color: Colors.blueAccent,
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: Color(0xFF56ccf2),
),
accountName: Text("User Name Goes"),
accountEmail: Text("emailaddress#gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? Color(0xFF56ccf2)
: Colors.white,
child: Text("TK",
style: TextStyle(fontSize: 50,
color: Colors.lightGreenAccent,),),
),
),
ListTile(
title: Text('Home',
style: TextStyle(
color: Colors.white,
fontSize: 18,
)),
contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
trailing: Icon(Icons.arrow_right,
color: Colors.white,),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => HomeScreen()));
},
),
],
),
),
),
The simplest way:
Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(color:Theme.of(context).bottomAppBarColor),
)],
),
)
You can wrap whatever you have in your drawer with a container wrapped with expanded widget. Thus you can change the color of the container there. Something like this will work.
Drawer(
child: Expanded(
child: Container(
color: Colors.red,
child: Text('Tabs'),
),
),
)