Is it possible to set the width of a drawer in Flutter to the width of its widetst child to avoid f. e. clipping of the DrawerHeader?
That is what it should look like:
green is the screen, grey the drawer
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(),
drawer: Container(
color: Colors.grey,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SafeArea(
child: Container(
padding: EdgeInsets.symmetric(vertical: 24),
child: Text('User name'),
),
),
Text('Text'),
Text(
'Long loong looooooong very very very long text',
maxLines: 1,
),
],
),
),
),
);
}
}
Related
I am trying to implement this kind of UI. But i can't find a way to place image outside the container.(Check the image )
Hey you can use Stack widget to overlap from card, use Positioned to align your widget at particular position.
For - Eg.
Stack(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: MediaQuery.of(context).size.width*0.6,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children:const [
Text("Title Text "),
Text("Body text"),
],
),
),
const Spacer(),
],
),
),
),
),
Positioned(
left: MediaQuery.of(context).size.width*0.65,
top: -10,
bottom: 15,
child: Image.asset("assets/sample.png", fit:BoxFit.fill,), // replace your image with Image.assets here
),
Positioned(
right: 20,
top: 0,
bottom: 0,
child: IconButton(onPressed: (){}, icon: const Icon(Icons.add_circle),),
),
],
)
For more details about Stack
Output will come like this -
You can use Stack widget first put Image widget inside it and then Container widget
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
alignment : Alignment.center,
children :[
Image.network('https://image.shutterstock.com/image-vector/sample-stamp-rubber-style-red-260nw-1811246308.jpg'),
Container( child :const Text('test',style : TextStyle(color: Colors.black ,fontSize: 20.00))),
],
);
}
}
class StoryUI extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stories'),
),
body: Column(
children: [
Text('Georgy'),
Storycard(),
],
),
),
);
}
}
class Storycard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, int index) {
return GestureDetector(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16)),
child: Column(
children: <Widget>[
ClipRRect(
child: Image.asset(
news[index].image,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0)),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(news[index].newsHeadline,
style: GoogleFonts.ubuntu(
fontSize: 17, fontWeight: FontWeight.bold)),
)
],
),
),
),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => NewsDetails(news: news[index])));
});
},
itemCount: news.length,
);
}
}
I am trying here to have a list of scrollable cards. I want space above the cards to add some text. SO I tried using column and have a text and Listview Bulider as children. But the emulator is showing blank screen.
When the StoryCard() is alone used as the body the output comes with widgets. I can't add anything above the Listview. Can someone help.
enter image description here
Use Expanded class or Flexible class for the ListView.
ListView requires a finite height for it's content.
With your current code, ListView is having infinite height, hence the error. Expanded or Flexible helps you to have the remaining space to be utilized for your child
Solution
class StoryUI extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stories'),
),
body: Column(
children: [
Text('Georgy'),
// here is the change
Expanded(
child: Storycard()
)
]
)
)
);
}
}
Using Flexible
class StoryUI extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stories'),
),
body: Column(
children: [
Text('Georgy'),
// here is the change
Flexxible(
fit: FlexFit.loose,
child: Storycard()
)
]
)
)
);
}
}
Due to unavailability of modifying app bar leading property width I'm forced to create my own leading trailing property by using AppBar title property. However I've noticed that title has some default horizontal padding there.
Scaffold(
appBar: AppBar(
centerTitle: true,
title: Container(
height: 36,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(width: 80, child: Text('Cancel')),
Text('Profile'),
Container(width: 80, child: Text('Done'))
],
),
),
),
)
Is there any way to make it smaller?
Use action[] inside the appbar instead of using Row.
appBar: new AppBar(
//title: new Text(Strings.app_name),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(onPressed: (){
},
child: new Text('Cancel'),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child:
new RaisedButton(onPressed: (){
},child: new Text('done'),)
),
],
//centerTitle:true,
),
You can use the titleSpacing property of the AppBar to control the horizontal spacing for the title.
For example following snippet will remove all the leading spacing from title-
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0.0,
title: const Text('AppBar Demo'),
),
body: const Center(
child: Text(
'This is the home page',
style: TextStyle(fontSize: 24),
),
),
);
}
}
I hope this helps!
Please use titleSpacing: 0.0
appBar: AppBar(
titleSpacing: 0.0,
title: Text('AppBar Example'),
),
I can't seem to get icon button to appear with text next to it. Should look like:
I am following the introduction tutorial in Udacity. Still trying to get my head around all of the correct formatting, widgets, etc
Code:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: "Category List",
home: Scaffold(
appBar: AppBar(
title: Text('This is a list item'),
),
body: Category(),
),
),
);
}
class Category extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Material(
child: Container(
child: Padding(
padding: EdgeInsets.all(16.0),
child: InkWell(
onTap: () => {},
child: Row(
children: <Widget>[
Icon(Icons.access_alarms),
Text('Click'),
],
),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: "Category List",
home: Scaffold(
appBar: AppBar(
title: Text('This is a list item'),
),
body: Category(),
),
),
);
}
class Category extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Material(
child: Container(
decoration:BoxDecoration(
color:Colors.green.withOpacity(0.4),
border:Border.all(),
),
child: Padding(
padding: EdgeInsets.all(16.0),
child: InkWell(
onTap: () => {},
child: Row(
children: <Widget>[
Icon(Icons.access_alarms),
Text('Click'),
],
),
),
),
),
);
}
}
have you tried to wrap your icons and text using Expanded() widget?
I have a simple layout that consists of one Column with few children. Some of these are Rows which contain children either. I've added Dividers between the children of the Column and VerticalDividers between the children of the Rows. The (horizontal) Dividers are shown fine. However the VerticalDividers are not shown in the app.
I have already tried wrapping the Rows children in some other layout widget like Container, but nothing seems to work.
Screenshot
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,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test App'),
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Text('Hello World'),
),
),
Divider(height: 1),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.2'),
),
],
),
Divider(height: 1),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.2'),
),
],
)
],
),
);
}
}
just wrap Rows with IntrinsicHeight widget
your example will looks like
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,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test App'),
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Text('Hello World'),
),
),
Divider(height: 1),
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.2'),
),
],
),
),
Divider(height: 1),
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.2'),
),
],
),
)
],
),
);
}
}
Try this:
Container(
height: 20,
child: VerticalDivider(
width: 20
color: Colors.black,
),
),
It worked for me.