Add Profile icon in Flutter - flutter

Home Screen
So I'm trying to recreate a layout somewhat similar to the iOS App Store Home page. I wanted to know how to add a small profile icon next to the "Home" title as shown in the screenshot attached. I tried to use certain alignments but it doesn't seem to work. Any suggestions?
Edit: I have just attached the code below for reference as well
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue[900],
Colors.blue[300],
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 30),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20),
Text(
'Home',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 50),
Container(
padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
color: Colors.white,
),
),
SizedBox(height: 30),
Container(
padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
color: Colors.white,
),
),
SizedBox(height: 30),
Container(
padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
color: Colors.white,
),
),
],
),
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex,
backgroundColor: Colors.white,
iconSize: 35,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
backgroundColor: Colors.blue,
),
],
onTap: (index) {
setState(() {
currentIndex = index;
});
},
),
floatingActionButton: Container(
height: 80,
width: 80,
child: FloatingActionButton(
child: Icon(
Icons.add,
size: 40,
color: Colors.black,
),
backgroundColor: Colors.yellowAccent,
onPressed: () {
setState(() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AddRoom()),
);
});
},
),
),
),
);

One way you should be able to do this is using a Row as the top child of the Column which will contain the title "Home" as the Text widget and a CircleAvatar for profile image, and setting the mainAxisAlignment of the row to spaceBetween like this..
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Home',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
'https://source.unsplash.com/50x50/?portrait',
),
),
],
)

Wrap your Text with a Row
Row(
mainAxisAlignment: MainAxisAlignment.start, //change this as you need
children: <Widget>[
Text(
'Home',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
Icon(Icons.home), //change this icon as you need
],
),

Just take Icons.account_circle_rounded and u get an account icon.
Like such

Related

How can I change the bottom color of my drawer?

I have created my drawer. I have put the list tiles in a container and set the color of my container to white but the bottom of drawer still shows black. The widget is put in a separate class. I want the whole drawer to white except the drawer header which is in yellow. How can I solve it.
Here is code snippet:
class NavigationDrawerWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
padding: EdgeInsets.only(
top: 50,
bottom: 50,
),
color: Colors.yellow,
child: Center(
child: Column(
children: [
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage('images/profile.png'),
),
),
),
SizedBox(
height: 20,
),
Text(
'Usama Tahir',
style: TextStyle(
color: Colors.black,
),
)
],
),
),
),
Container(
// color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
ListTile(
leading: Icon(
Icons.person,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.account_balance_outlined,
color: Colors.black,
),
title: Text(
'Tansaction History',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.password_outlined,
color: Colors.black,
),
title: Text(
'Change Password',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.settings_accessibility_outlined,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ListTile(
leading: Icon(
Icons.login_outlined,
color: Colors.black,
),
title: Text(
'Logout',
style: TextStyle(
color: Colors.black,
),
),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => `WelcomeScreen()));`
},
),
],
),
),
],
),
),
],
),
);
}
}
Use backgroundColor: Colors.white property in Drawer widget and you are all set to go.
Try this
Drawer(backgroundColor: Colors.white,
try this to make logout to set at the bottom.
Drawer(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
padding: EdgeInsets.only(
top: 50,
bottom: 50,
),
color: Colors.yellow,
child: Center(
child: Column(
children: [
Container(
width: 100,
height: 100,
// decoration: BoxDecoration(
// shape: BoxShape.circle,
// image: DecorationImage(
// image: AssetImage('images/profile.png'),
// ),
// ),
),
SizedBox(
height: 20,
),
Text(
'Usama Tahir',
style: TextStyle(
color: Colors.black,
),
)
],
),
),
),
Container(
// color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
ListTile(
leading: Icon(
Icons.person,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.account_balance_outlined,
color: Colors.black,
),
title: Text(
'Tansaction History',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.password_outlined,
color: Colors.black,
),
title: Text(
'Change Password',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.settings_accessibility_outlined,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ListTile(
leading: Icon(
Icons.login_outlined,
color: Colors.black,
),
title: Text(
'Logout',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
],
),
),
],
),
)

How can I achieve this design with flutter?

I tried using tab bar to solve it but it didn't work
You can use the ClipRRect widget:
Scaffold(
body: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
width: 100,
color: Colors.red,
child: Text(
'Healthy',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
width: 10,
),
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
width: 100,
color: Colors.red,
child: Text(
'Healthy',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
);
Result:
Row(
children: [
//unselected Chip
ActionChip(
onPressed: (){
},
shape: StadiumBorder(side: BorderSide()),
label: Text("History"),
backgroundColor: Colors.white,
),
//selected Chip
ActionChip(
onPressed: (){
},
label: Text("Funny Stories"),
shape: StadiumBorder(side: BorderSide(color: Colors.orange)),
backgroundColor: Colors.orange,
)
],
),
output :

How to make custom appbar like this in flutter?

I design my own and trying to use this design too
so it's can be like my design??
but i don't understand how to put this button to appbar[action] cuz when i fill that button take full height
my code here i write by use it as Widget ,then i call for use at appbar
AppBar _profileAppbar(
context,
) {
return AppBar(
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"state.username",
style: TextStyle(
color: Colors.black, fontSize: 24, fontFamily: 'SukumvitSetBold'),
),
],
),
actions: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: HexColor("7225FF"),
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(18.0),
),
child: Text(
"Edit",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
height: 5,
width: 5,
),
],
iconTheme: IconThemeData(
color: Colors.black,
),
// leading: Icon(Icons.menu),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0.0,
);
}
One Idea is to make eveything custom without using AppBar().
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Expanded(child: Text("Username", style: TextStyle(color: Colors.black),)),
const SizedBox(width: 10),
Icon(Icons.message, color: Colors.black),
const SizedBox(width: 10),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(999),
),
),
child: Text('Edit', style: TextStyle(color: Colors.white))
),
],
),
height: kToolbarHeight,
decoration: const BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
offset: Offset(0.0, 2),
blurRadius: 14,
spreadRadius: 2,
)
]),
),
));
}
}

Dart / Flutter: Navigate (with Navigator) between Pages without context (so no Navigator.push?)

In my App I have 6 different pages.
Theres 1 page called "FavouritesPage", where user pickes favourites are listed. They are displayed by a column, which uses a list from another class. The code of the list is following:
List<Widget> favoriteContainerLists() {
DatabaseProvider.db.queryDb();
List<Widget> localList = [];
if (DatabaseProvider.publicFavoriteList == null ||
DatabaseProvider.publicFavoriteList.isEmpty) {
localList.add(
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hier erscheinen deine Favoriten!",
style: TextStyle(
fontFamily: "Hind",
fontSize: 22,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Makiere Bilder auf der Informationsseite mit ",
style: TextStyle(
color: Colors.indigo,
fontFamily: "Hind",
fontSize: 15,
),
),
Icon(
Icons.star_border,
color: Colors.orange,
),
],
),
Text(
" um sie hinzuzufügen!",
style: TextStyle(
color: Colors.indigo,
fontFamily: "Hind",
fontSize: 15,
),
),
],
),
);
} else {
localList.add(Padding(
padding: const EdgeInsets.only(bottom: 15.0),
child: Text(
"Deine Favoriten:",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 30,
color: Colors.indigoAccent,
fontFamily: "Hind",
),
),
));
for (var i = 0; i < DatabaseProvider.publicFavoriteList.length; i++) {
DatabaseProvider.db.queryDb();
int currentIdInt = DatabaseProvider.publicFavoriteList[i];
localList.add(
Padding(
padding: const EdgeInsets.only(bottom: 15),
child: MaterialButton(
onPressed: ***null***,
padding: const EdgeInsets.only(bottom: 0),
child: Container(
width: double.infinity,
height: 120,
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 8, 10, 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Container(
width: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8)),
),
child: Image.asset(
AppBrain().contentList[currentIdInt].imageAdress),
),
),
VerticalDivider(
thickness: 2,
indent: 15,
endIndent: 15,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
AppBrain().contentList[currentIdInt].artName,
style: TextStyle(
fontFamily: "Hind",
fontSize: 23,
color: Colors.blueGrey),
),
Expanded(
child: Container(
child: RichText(
maxLines: 2,
softWrap: true,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
text: TextSpan(
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontFamily: "Hind"),
text:
(contentList[currentIdInt].description),
),
),
),
)
],
),
),
],
),
),
),
),
),
);
}
}
return localList;
}
The code of the page displaying it:
Widget build(BuildContext context) {
DatabaseProvider.db.queryDb();
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Startseite")),
BottomNavigationBarItem(
icon: Icon(Icons.star), title: Text("Favoriten")),
BottomNavigationBarItem(
icon: Icon(Icons.casino), title: Text("Quiz")),
BottomNavigationBarItem(
icon: Icon(Icons.map), title: Text("Karte")),
],
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.grey,
showUnselectedLabels: true,
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
body: SingleChildScrollView(
child: WillPopScope(
onWillPop: _backButtonPressed,
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15, top: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: AppBrain().favoriteContainerLists(),
),
),
),
),
),
);
}
They are located in 2 different classes. The class containing the list doesn't have a BuildContext and also should have non. Ideally, where it says onTap: null, at the moment I want it to be
Navigator.of(context).push(
toInformationPage(),
);
but I know I can't use anything that requires context. Any Ideas?
You use a GlobalKey for the navigator. There are already a lot of articles describing how to do it, here is an example
Another option is to wrap your favoriteContainerLists in a single Widget (maybe the column that wraps it) and use a build function. So you might have something like:
class FavoriteContainerList extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
child: The logic from AppBrain().favoriteContainerLists() here.
This other SO answer on the difference between functions and classes convinced me to use classes for other reasons, but getting context is nice too.

How to bring last Item of column to bottom

I am very new to flutter, Trying to design a login screen as in the image, I took a column and added all the widgets one by one. But coming to bottom part I tried with mainAxisAlignment, crossAxisAlignment still no luck, The bottom part is coming after the login button in the screen i.e Don't have account? and Create Account. I need those fields in bottom left to the screen.Please help how to achieve this.
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color.fromRGBO(150, 169, 62, 1),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
child: Container(
child: Image.asset('assets/logo_400.png'),
margin: const EdgeInsets.all(60.0),
width: 150.0,
height: 150.0,
),
),
Text(
'Log into your account',
style: TextStyle(color: Colors.white, fontSize: 25),
),
Container(
margin: const EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: const InputDecoration(
icon: Icon(
Icons.phone,
color: Colors.white,
),
hintText: '10 digit mobile number',
hintStyle: TextStyle(color: Colors.white)),
),
SizedBox(height: 20,),
TextFormField(
decoration: const InputDecoration(
// enabledBorder: const OutlineInputBorder(
// // width: 0.0 produces a thin "hairline" border
// borderSide: const BorderSide(
// color: Colors.white, width: 0.0),
// ),
// border: const OutlineInputBorder(),
suffixIcon: Icon(
Icons.remove_red_eye,
color: Colors.white,
),
icon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white)),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
//color: Colors.blue,
textColor: Colors.white,
//disabledColor: Colors.grey,
//disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Text(
"Forgot Password",
style: TextStyle(
fontSize: 15.0,
decoration: TextDecoration.underline),
),
),
],
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.all(25.0),
child: ButtonTheme(
minWidth: 300.0,
height: 50.0,
buttonColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: RaisedButton(
//shape: StadiumBorder(),
onPressed: () {},
textColor: Colors.black,
padding: const EdgeInsets.all(0.0),
child: Text(
'Login',
style: TextStyle(fontSize: 20),
),
),
),
),
//Spacer(),
SizedBox(
height: 150,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"Don't have a account?",
style: TextStyle(
color: Colors.white, fontSize: 15),
),
FlatButton(
//color: Colors.blue,
textColor: Colors.white,
//disabledColor: Colors.grey,
//disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Text(
"Create Account",
style: TextStyle(
fontSize: 20.0,
decoration: TextDecoration.underline),
),
)
],
)
],
)
],
)),
],
)),
);
Don't have account? and Create Account. I need those fields in bottom
left to the screen
just change
Row(mainAxisAlignment: MainAxisAlignment.end
to
Row(mainAxisAlignment: MainAxisAlignment.start
BTW Have you tested this layout in landscape? You should wrap the entire form in a list view so that there is no overflow warnings.
I know this is from a while ago.
But maybe it can help someone in the same spot.
The best solution to it is to wrap your widget Expanded and Align widgets As so :
Expanded(
child: Align(
alignment: Alignment.bottomLeft,
child: ListTile(
title: Text('Logout'),
onTap: _logout,
),
),
)
You can wrapping Column in Row widget then after column children put your bottom part.