I am struggling to figure out why my divider in my app bar is not appearing. When I increase the height of the divider, I notice my widgets move up. I looked at similar issues and none have worked. My appBar consists of two columns and one row for the user profile information and information on their "Partner". I wanted to use the divider to separate the partner name and username from the win/loss ratio.strong text
Widget build(BuildContext context) {
final user = Provider.of<User>(context);
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF2430346),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(100.0),
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildUserInfo(user),
Text(
"#username",
style: new TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.white,
)
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(right:70.0),
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"My Partner",
style: new TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
Text(
"Dorian",
style: new TextStyle(
color: Colors.white,
),
),
Text(
"#Doetheman",
style: new TextStyle(
color: Colors.white,
),
),
// Mfer aint appearing
Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
child: Divider(
height: 2.0,
color: Colors.white,
),
),
],
),
),
),
],
),
),
),
),
Widget _buildUserInfo(User user) {
return Column(
children: [
Avatar(
photoUrl: user.photoUrl,
radius: 40,
borderColor: Colors.black54,
borderWidth: 2.0,
),
const SizedBox(height: 8),
if (user.displayName != null)
Text(
user.displayName,
style: TextStyle(color: Colors.white),
),
const SizedBox(height: 8),
],
);
}
}
What I want it to look in view:
enter image description here
Instead of divider you can use container like this
Container(
alignment: Alignment.center,
width: 250,
height: 1,
color: Colors.black
),
Use IntrinsicWidth widget to wrap Column
IntrinsicWidth(
child: Column(
children: [
// ....
Divider(),
],
),
)
Related
The code below (I shortened the code for simplicity) displays the characteristics of the device. I placed all the characteristics in the body and displayed them in a certain way. Tell me how I can make two buttons (marked in red in the photo) under the body. Or put them in the body? tell me the best way to do it.
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
),
body: Align(
alignment: Alignment.topCenter,
child: Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
],
),
),
)
),
));
You can use bottomNavigationBar on Scaffold
Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
),
Also, you can wrap Container with Column widget
body: Column(
children: [
Container(...)//your widget
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(child: OutlinedButton(...)),
SizedBox(width:x),
Expanded(child: OutlinedButton(...)),
Full snippet on second approach
return Scaffold(
body: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
const Divider(
color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
],
),
),
)),
// Spacer(), /// you you want at the bottom
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
)
],
),
);
You can check more about widgets, Column and layout.
I have this issue with my Flutter UI. I'm trying to make my text break when it's too long, but the overflow ellipsis doesn't work. Can you help me please?
issue picture:
this is what i'm looking for:
My code:
static Drawer myDrawer (BuildContext context, String mode, String businessName) {
return Drawer(
child: Container(
child: ListView(
padding: EdgeInsets.only(top:0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: CustomPaint(
painter: DrawerHeaderPaint(),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40,
image: AssetImage('assets/logo.png')
),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25
),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
],
),
)
],
),
],
),
),
),
SizedBox(height: 40),
menuOptions(),
],
)
],
),
)
);
}
Try wrapping Business Info Column with Expanded widget and also wrap Text widget after apartment icon with Expanded widget, like so:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25,
), //TextStyle
), //Text
Container(
color: Colors.red,
child: Row(
children: const [
Icon(Icons.apartment, color: Color(0xff263d67)),
Expanded(
child: Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
), //TextStyle
), //Text
), //Expanded
],
), //Row
), //Container
],
), //Column
), //Expand
Use a Expanded or Flexible
Expanded(
child:
Text('Business Name tooooo loooooong',...))
//you can use the SizedBox widget and specify your text width it helps to ellipsis the text. Hope this code will help you.Thanks
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Dermo extends StatefulWidget {
const Dermo({Key? key}) : super(key: key);
#override
_DermoState createState() => _DermoState();
}
class _DermoState extends State<Dermo> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
)
,
drawer: Drawer(
backgroundColor: Colors.green,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40, image: AssetImage('assets/logo.png')),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
///if you want to show complete text use can comment
///out overflow,softWrap and maxLines otherwise you can use all
///these properties it ellipsis the text
SizedBox(
width: 160,
child: Text(
'Business Name tooooo loooooong',
/* overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,*/
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
),
],
),
)
],
),
],
),
),
SizedBox(height: 40),
],
)
],
),
)));
}
}
I attached the Images in this post. to gives you detail information of what I want to achieve??? I Trying to achieve like the image below.
Is it possible to add a shadow to title to make it above the dropdown Content????
I am try to make the dropdown content is looks below the Title how I can achieve that??? if there is any way to make the title look above the dropdown content it have please help me??
body: ListView.builder(
itemCount: Family.length,
itemBuilder: (context, index) {
return ExpansionTile(
backgroundColor: Colors.blueGrey,
collapsedBackgroundColor: Colors.red,
title: Text(
"HEADER HERE",
style: TextStyle(
//color: isExpanded ? Colors.pink : Colors.teal,
),
),
children: <Widget>[
ListTile(
// color: HexColor("FFF1CC93"),
title: Row(
children: <Widget>[
Container(
width: 50,
height: 50,
child: Image.asset(imageList[index]),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
Family[index],
style: TextStyle(
fontSize: 18,
color: Colors.teal.shade900,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10,
),
Container(
width: width,
child: Text(
Family[index],
style: TextStyle(
fontSize: 13,
color: Colors.grey[500],
),
),
),
],
),
)
],
)),
],
);
}),
please test this below code, i think you should use Theme on parent of ExpansionTile widget
body: ListView.builder(
itemCount: Family.length,
itemBuilder: (context, index) {
return Theme(
data: Theme.of(context).copyWith(cardColor: Colors.red),
child: ExpansionTile(
backgroundColor: Colors.blueGrey,
collapsedBackgroundColor: Colors.red,
title: Text(
"HEADER HERE",
style: TextStyle(
//color: isExpanded ? Colors.pink : Colors.teal,
),
),
children: <Widget>[
ListTile(
// color: HexColor("FFF1CC93"),
title: Row(
children: <Widget>[
Container(
width: 50,
height: 50,
child: Image.asset(imageList[index]),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
Family[index],
style: TextStyle(
fontSize: 18,
color: Colors.teal.shade900,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10,
),
Container(
width: width,
child: Text(
Family[index],
style: TextStyle(
fontSize: 13,
color: Colors.grey[500],
),
),
),
],
),
)
],
)),
],
),
);
}),
I'm new to Flutter and I'm trying to build my first app.
I want my HomePage to have a small image on the top and its content on the rest of the page. When scrolling, I want the image to behave like a Parallax effect, staying fixed and the grey ClipPath() widget scrolling over it.
I've already tried a few approaches and I'm not sure if I'm using the correct elements on this page but this was the only way I managed to position everything the way I wanted so far.
However, even using SingleChildScrollView() as this the Container/ClipPath() father, I still can't scroll the page.
Could you please help me with that? Thank you all.
// hope.page.dart:
import 'package:flutter/material.dart';
import 'package:remind_md/ui/shared/clippers/content.clipper.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.notifications, color: Colors.white),
onPressed: () {
},
),
// action button
IconButton(
icon: Icon(Icons.settings, color: Colors.white),
onPressed: () {
},
),
],
),
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xff82d9e8), Color(0xff27acc1)],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: OverflowBox(
alignment: Alignment(-0.75,-1.05),
maxHeight: MediaQuery.of(context).size.height * 2,
child: Image.asset(
'images/home_doctors.png',
scale: 1.05,
),
)
),
Positioned(
top: MediaQuery.of(context).size.height*0.2 ,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: ClipPath(
clipper: ContentClipper(),
child: Container(
padding: EdgeInsets.only(top: 40),
width: MediaQuery.of(context).size.width,
color: Color(0xfff4f4f4),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/card_calendar.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'12 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até próxima',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'consulta.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
),
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/pill_case.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'31 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até comprar',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'medicamento.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
)
],
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_pills.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xfff47e71),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_stet_heart.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xff3865b9),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text('Histórico', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 24, color: Color(0xff27acc1), ) ),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('30 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider()
],
),
),
)
],
)
)
),
),
),
),
]
),
);
}
}
Wrap the SingleChildScrollView widget with an expanded widget. It should do the work. Because for the singleChildScrollView to work, it does not some height and width to scroll. Hope it helps.
UI Layout
If the purple area is inside an Expanded widget, how would I go about to position the button? I've implemented that UI by setting a fixed height to the purple container but haven't been able to understand how to achieve the same effect if the height is variable, depending on the content.
I was able to get close by using Stack and Positioned widgets but then the button is not really clickable. If anyone can give me a general idea on how to achieve the desired goal I would be thankful.
Here's my attempt (demo case)
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 1,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Stack(
children: <Widget> [
Padding(
padding: const EdgeInsets.only(bottom: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.book,
color: Colors.white,
size: 40.0
),
Container(
width: 90.0,
child: new Divider(color: Colors.white),
),
Text(
"Some random text -",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, right: 70.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'More random text that can vary a lot!',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random text ',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
Positioned(
bottom: 0.0,
left: MediaQuery.of(context).size.width - 100.0,
child: FractionalTranslation(
translation: const Offset(0.0, 0.8),
child: FloatingActionButton(
backgroundColor: Colors.white,
foregroundColor: Colors.redAccent,
child: new Icon(
Icons.map
),
onPressed: () {
},
),
),
),
]
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
"Random text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 16.0,
color: Colors.black38
)
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Random text - long text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 18.0
)
),
),
],
)
],
)
),
),
],
);
Explaining what I described in the comments:
You can use the FractionalTranslation widget to shift your FAB half way down.
FractionalTranslation(translation: Offset(0, .5), child: FloatingActionButton(...))
This requires you to have it positioned at the bottom of the purple area (referring to your screenshot) beforehand, but I assume that you have that figured out.