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
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,
),
],
),
),
],
),
)
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 :
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,
)
]),
),
));
}
}
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.
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.