what is the best way to implement this home screen? - flutter

I would like to create a home page for my flutter app. I used templates from the network, but unfortunately I don't get it the way I sketched it in the picture. maybe someone can help me with that
sketch / result
Unfortunately, I'm sure that I can't do it better: - /, would like to have it exactly like the one on the left (icons and colors are not so important)
I used this link from the forum as a template for the appbar, and I had difficulties in inserting it ^^
Custom AppBar Flutter
I also got the code for the BottomNavigationBar from somewhere in the forum, but I think this is not suitable for my purposes anyway. Since I don't like this shrink effect when clicking on it, the two arrow buttons at the edge should snap back when pressed and not stay in the pressed state, as they should stand for the front and back function ...
here is my complete main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.light,
theme: ThemeData(
primaryColor: Color(0xFF34445c),
primaryColorBrightness: Brightness.light,
brightness: Brightness.light,
primaryColorDark: Colors.black,
canvasColor: Color(0xFFCECECE),
appBarTheme: AppBarTheme(brightness: Brightness.light)),
darkTheme: ThemeData(
primaryColor: Colors.black,
primaryColorBrightness: Brightness.dark,
primaryColorLight: Colors.black,
brightness: Brightness.dark,
primaryColorDark: Colors.black,
indicatorColor: Colors.white,
canvasColor: Colors.black,
appBarTheme: AppBarTheme(brightness: Brightness.dark)),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _selectedItemColor = Colors.white;
final _unselectedItemColor = Colors.white30;
final _selectedBgColor = Color(0xFF293749);
final _unselectedBgColor = Color(0xFF34445c);
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 15, fontWeight: FontWeight.normal);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: ZURÜCK',
style: optionStyle,
),
Text(
'Index 1: FAVORITES',
style: optionStyle,
),
Text(
'Index 2: KOMMENTARE / LÖSCHEN',
style: optionStyle,
),
Text(
'Index 3: ABOUT-US',
style: optionStyle,
),
Text(
'Index 4: WEITER',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Color _getBgColor(int index) =>
_selectedIndex == index ? _selectedBgColor : _unselectedBgColor;
Color _getItemColor(int index) =>
_selectedIndex == index ? _selectedItemColor : _unselectedItemColor;
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: double.infinity,
height: kBottomNavigationBarHeight,
child: Material(
color: _getBgColor(index),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData),
Text(text,
style: TextStyle(fontSize: 9, color: _getItemColor(index))),
],
),
onTap: () => _onItemTapped(index),
),
),
);
_appBar(height) => PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width, height+80 ),
child: Stack(
children: <Widget>[
Container(
child: Center(
child: Text("TEXT", style: TextStyle(fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
color:Theme.of(context).primaryColor,
height: height+75,
width: MediaQuery.of(context).size.width,
),
Container(
),
Positioned( // To take AppBar Size only
top: 100.0,
left: 20.0,
right: 20.0,
child: AppBar(
backgroundColor: Color(0xFF293749),
leading: Icon(Icons.menu, color: Colors.white),
primary: false,
title: Container(
margin: EdgeInsets.only(top: 4.0, bottom: 4.0, right: 0.0, left: 0.0),
color: Colors.white,
child: Container(
margin: EdgeInsets.only(top: 0.0, bottom: 0.0, right: 5.0, left: 5.0),
child: TextField(
decoration: InputDecoration(
hintText: "Suchen",
border: InputBorder.none,
hintStyle: TextStyle(color: Colors.grey))),
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search, color: Colors.white), onPressed: () {},),
],
),
)
],
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: _appBar(AppBar().preferredSize.height),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _buildIcon(Icons.arrow_back_ios_rounded, 'ZURÜCK', 0),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.favorite, 'FAVORITEN', 1),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.comment, 'KOMMENTARE', 2),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.info_outline_rounded, 'ÜBER UNS', 3),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.arrow_forward_ios_rounded, 'WEITER', 4),
title: SizedBox.shrink(),
),
],
currentIndex: _selectedIndex,
selectedItemColor: _selectedItemColor,
unselectedItemColor: _unselectedItemColor,
),
);
}
}

I have modified your code with some commentaries to support you in building the UI.
For the AppBar, you are going in the right direction of using PreferredSize with Stack, just some minor adjustments.
For the BottomNavigationBar, since the provided BottomNavigationBarItem has the icon and title attributes already, we can use that and modify the color from their parents. The 2 arrows buttons can be placed together within the Row.
Here's the full example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.light,
theme: ThemeData(
primaryColor: Color(0xFF34445c),
primaryColorBrightness: Brightness.light,
brightness: Brightness.light,
primaryColorDark: Colors.black,
canvasColor: Color(0xFFCECECE),
appBarTheme: AppBarTheme(brightness: Brightness.light)),
darkTheme: ThemeData(
primaryColor: Colors.black,
primaryColorBrightness: Brightness.dark,
primaryColorLight: Colors.black,
brightness: Brightness.dark,
primaryColorDark: Colors.black,
indicatorColor: Colors.white,
canvasColor: Colors.black,
appBarTheme: AppBarTheme(brightness: Brightness.dark)),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _selectedItemColor = Colors.white;
final _unselectedItemColor = Colors.white30;
final _selectedBgColor = Color(0xFF293749);
final _unselectedBgColor = Color(0xFF34445c);
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 15, fontWeight: FontWeight.normal);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: ZURÜCK',
style: optionStyle,
),
Text(
'Index 1: FAVORITES',
style: optionStyle,
),
Text(
'Index 2: KOMMENTARE / LÖSCHEN',
style: optionStyle,
),
Text(
'Index 3: ABOUT-US',
style: optionStyle,
),
Text(
'Index 4: WEITER',
style: optionStyle,
),
];
_appBar() => PreferredSize(
preferredSize: Size.fromHeight(300),
child: Container(
height: 300,
child: Stack(
children: <Widget>[
Container(
color: Color(0xFF34445D),
height: 180,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"APP TITLE",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(
4,
(index) => Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Icon(Icons.people, color: Colors.white), // Sample icons for demonstration
),
),
)
],
),
),
Positioned(
top: 150.0,
left: 20.0,
right: 20.0,
child: Container(
color: Color(0xFF293749),
child: Row(
children: [
IconButton(
icon: Icon(Icons.menu, size: 40, color: Colors.white),
padding: EdgeInsets.zero,
onPressed: () {},
),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(vertical: 3),
padding: EdgeInsets.only(left: 3),
color: Colors.white,
height: 30,
child: TextField(
style: TextStyle(color: Colors.black, fontSize: 12),
decoration: InputDecoration(
hintText: 'Search...',
border: InputBorder.none),
),
),
),
IconButton(
icon: Icon(Icons.search, size: 30, color: Colors.white),
padding: EdgeInsets.zero,
onPressed: () {},
),
],
),
),
),
],
),
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: _appBar(),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Container(
color: _selectedBgColor,
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () {
setState(() {
_selectedIndex =
_selectedIndex <= 0 ? _selectedIndex : _selectedIndex - 1;
});
},
),
Expanded(
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed, // Add the type here to avoid auto resize
backgroundColor: _selectedBgColor, // You can also set the unselectedBackgroundColor
currentIndex: _selectedIndex,
onTap: (index) => setState(() => _selectedIndex = index), // Update the selected index
selectedItemColor: _selectedItemColor,
unselectedItemColor: _unselectedItemColor,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.favorite), title: Text('FAVORITEN')),
BottomNavigationBarItem(
icon: Icon(Icons.comment), title: Text('KOMMENTARE')),
BottomNavigationBarItem(
icon: Icon(Icons.info_outline_rounded),
title: Text('ÜBER UNS')),
],
),
),
IconButton(
icon: Icon(Icons.arrow_forward_ios, color: Colors.white),
onPressed: () {
setState(() {
_selectedIndex =
_selectedIndex >= 2 ? _selectedIndex : _selectedIndex + 1;
});
},
),
],
),
),
);
}
}

Related

The instance member 'posts' can't be accessed in an initializer

I would like to load other REST CALL which callS other data from DB.
I would like to use bottom navigation bar.
When I coded without bottom navigation bar, the app worked.
But When I inserted bottom navigation bar, "posts" function(related to REST CALL) has an error.
itemCount: posts == null ? 0 : posts.length,
itemBuilder: (context, index) {
Post post = posts[index];
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'Services.dart';
import 'Post.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter ListView'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late List<Post> posts;
late bool loading;
#override
void initState() {
super.initState();
loading = true;
Services.getPosts().then((list) {
super.setState(() {
posts = list;
loading = false;
});
});
}
#override
int _selectedIndex = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(loading ? 'Loading...' : 'Posts'),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.white.withOpacity(.60),
selectedFontSize: 14,
unselectedFontSize: 14,
currentIndex: _selectedIndex,
//현재 선택된 Index
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text('Favorites'),
icon: Icon(Icons.favorite),
),
BottomNavigationBarItem(
title: Text('Music'),
icon: Icon(Icons.music_note),
),
BottomNavigationBarItem(
title: Text('Places'),
icon: Icon(Icons.location_on),
),
BottomNavigationBarItem(
title: Text('News'),
icon: Icon(Icons.library_books),
),
],
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
);
}
List _widgetOptions = [
Column(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment:CrossAxisAlignment.center,
children: [
Container(
color: Colors.amber,
child: Row(
children: const [
Expanded(
child: Center(
child: Text('Date',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon/us\$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('US \$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
],
),
),
Expanded(
child: Center(
child: Container(
child: ListView.builder(
itemCount: posts == null ? 0 : posts.length,
itemBuilder: (context, index) {
Post post = posts[index];
return Container(
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.blueAccent)),
),
child: ListTile(
title: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Center(child: Text(post.date))),
Expanded(child: Center(child: Text(post.rate))),
Expanded(
child: Center(child: Text(post.koreanwon))),
Expanded(child: Center(child: Text(post.dollar))),
],
),
),
// ),
);
}),
),
),
),
],
),
];
}
You're trying to access an instance variable (posts), in another instance variable(_widgetOptions). This is disallowed as you're trying to access something that isn't. Move the initialization into the initState.
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'Services.dart';
import 'Post.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter ListView'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late List<Post> posts;
late bool loading;
late List _widgetOptions;
#override
void initState() {
super.initState();
loading = true;
Services.getPosts().then((list) {
super.setState(() {
posts = list;
loading = false;
});
});
//You have to initialize _widgetOptions into the `initState` method.
_widgetOptions = [
Column(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment:CrossAxisAlignment.center,
children: [
Container(
color: Colors.amber,
child: Row(
children: const [
Expanded(
child: Center(
child: Text('Date',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon/us\$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('US \$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
],
),
),
Expanded(
child: Center(
child: Container(
child: ListView.builder(
itemCount: posts == null ? 0 : posts.length,
itemBuilder: (context, index) {
Post post = posts[index];
return Container(
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.blueAccent)),
),
child: ListTile(
title: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Center(child: Text(post.date))),
Expanded(child: Center(child: Text(post.rate))),
Expanded(
child: Center(child: Text(post.koreanwon))),
Expanded(child: Center(child: Text(post.dollar))),
],
),
),
// ),
);
}),
),
),
),
],
),
];
}
#override
int _selectedIndex = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(loading ? 'Loading...' : 'Posts'),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.white.withOpacity(.60),
selectedFontSize: 14,
unselectedFontSize: 14,
currentIndex: _selectedIndex,
//현재 선택된 Index
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text('Favorites'),
icon: Icon(Icons.favorite),
),
BottomNavigationBarItem(
title: Text('Music'),
icon: Icon(Icons.music_note),
),
BottomNavigationBarItem(
title: Text('Places'),
icon: Icon(Icons.location_on),
),
BottomNavigationBarItem(
title: Text('News'),
icon: Icon(Icons.library_books),
),
],
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
);
}
}

I am getting two appBar in flutter app. I am trying to add Drawer widget and TabBar widget in flutter app

main.dart
import 'package:flutter/material.dart';
import 'package:stray_animal_emergencyrescue/signUpPage.dart';
import './commons/commonWidgets.dart';
import 'package:stray_animal_emergencyrescue/loggedIn.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
//title: 'Flutter login UI',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//String showPasswordText = "Show Password";
bool obscurePasswordText = true;
#override
Widget build(BuildContext context) {
final passwordField = TextField(
obscureText: obscurePasswordText,
decoration: InputDecoration(
//contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Password",
//border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
suffixIcon: IconButton(
icon: new Icon(Icons.remove_red_eye),
onPressed: () {
setState(() {
this.obscurePasswordText = !obscurePasswordText;
});
},
)),
);
final loginButon = Material(
//elevation: 5.0,
//borderRadius: BorderRadius.circular(30.0),
color: Colors.blue,
child: MaterialButton(
//minWidth: MediaQuery.of(context).size.width,
//padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
//print(MediaQuery.of(context).size.width);
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => LogIn()),
);
},
child: Text('Login', textAlign: TextAlign.center),
),
);
final facebookContinueButton = Material(
//borderRadius: BorderRadius.circular(30.0),
color: Colors.blue,
child: MaterialButton(
//minWidth: MediaQuery.of(context).size.width,
//padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
//print(MediaQuery.of(context).size.width);
},
child: Text('Facebook', textAlign: TextAlign.center),
),
);
final googleContinueButton = Material(
//borderRadius: BorderRadius.circular(30.0),
color: Colors.blue,
child: MaterialButton(
//minWidth: MediaQuery.of(context).size.width,
//padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
//print(MediaQuery.of(context).size.width);
},
child: Text('Google ', textAlign: TextAlign.center),
),
);
final signUpButton = Material(
//borderRadius: BorderRadius.circular(30.0),
color: Colors.blue,
child: MaterialButton(
//minWidth: MediaQuery.of(context).size.width,
//padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FormScreen()),
);
//print(MediaQuery.of(context).size.width);
},
child: Text('Sign Up ', textAlign: TextAlign.center),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Animal Emergency App"),
),
body: Center(
child: Container(
//color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//SizedBox(height: 45.0),
getTextFieldWidget(),
SizedBox(height: 15.0),
passwordField,
sizedBoxWidget,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
facebookContinueButton,
SizedBox(width: 5),
googleContinueButton,
SizedBox(width: 5),
loginButon
],
),
/*loginButon,
signUpButton,*/
sizedBoxWidget,
const Divider(
color: Colors.black,
height: 20,
thickness: 1,
indent: 20,
endIndent: 0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
signUpButton
],
),
],
),
),
),
),
);
}
}
loggedIn.dart
import 'package:flutter/material.dart';
import './tabbarviews/emergencyresue/EmergencyHome.dart';
import './tabbarviews/animalcruelty/animalCrueltyHome.dart';
import './tabbarviews/bloodbank/bloodBankHome.dart';
class LogIn extends StatefulWidget {
#override
_LogInState createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static List<Widget> _widgetOptions = <Widget>[
EmergencyHome(),
AnimalCrueltyHome(),
BloodBankHome()
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First app bar appearing'),
actions: <Widget>[
GestureDetector(
onTap: () {},
child: CircleAvatar(
//child: Text("SC"),
backgroundImage: AssetImage('assets/images/760279.jpg'),
//backgroundImage: ,
),
),
IconButton(
icon: Icon(Icons.more_vert),
color: Colors.white,
onPressed: () {},
),
],
),
drawer: Drawer(
child: ListView(
children: <Widget>[
new ListTile(title: Text("Primary")),
MyListTile(
"Home",
false,
"Your customized News Feed about people you follow, ongoing rescues, nearby activities, adoptions etc.",
3,
Icons.home,
true,
() {}),
MyListTile(
"News & Media Coverage",
false,
"News about incidents which need immediate action, changing Laws",
3,
Icons.home,
false,
() {}),
MyListTile(
"Report",
true,
"Report cases with evidences anonymously",
3,
Icons.announcement,
false,
() {}),
MyListTile(
"Blood Bank",
true,
"Details to donate blood ",
3,
Icons.medical_services,
false,
() {}),
],
),
),
body: _widgetOptions[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.pets),
label: 'Emergency Rescue',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_alert),
label: 'Report Cruelty',
),
BottomNavigationBarItem(
icon: Icon(Icons.medical_services),
label: 'Blood Bank',
),
/*BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Safe Hands',
backgroundColor: Colors.blue),*/
],
onTap: _onItemTapped,
),
);
}
}
//Safe Hands
class MyListTile extends StatelessWidget {
final String title;
final bool isThreeLine;
final String subtitle;
final int maxLines;
final IconData icon;
final bool selected;
final Function onTap;
MyListTile(this.title, this.isThreeLine, this.subtitle, this.maxLines,
this.icon, this.selected, this.onTap);
#override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
isThreeLine: isThreeLine,
subtitle:
Text(subtitle, maxLines: maxLines, style: TextStyle(fontSize: 12)),
leading: Icon(icon),
selected: selected,
onTap: onTap);
}
}
EmergencyHome.dart
import 'package:flutter/material.dart';
import './finishedAnimalEmergencies.dart';
import './reportAnimalEmergency.dart';
import './ongoingAnimalEmergencies.dart';
class EmergencyHome extends StatefulWidget {
#override
_EmergencyHomeState createState() => _EmergencyHomeState();
}
class _EmergencyHomeState extends State<EmergencyHome> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Second appBar appearing"),
bottom: TabBar(
tabs: [
Tab(
//icon: Icon(Icons.more_vert),
text: "Report",
),
Tab(
text: "Ongoing",
),
Tab(
text: "Finished",
)
],
),
),
body: TabBarView(
children: [
ReportAnimalEmergency(),
OngoingAnimalEmergencies(),
FinishedAnimalEmergencies(),
],
),
)
);
}
}
The issue I am facing is two appBar, I tried removing appBar from loggedIn.dart but Drawer hamburger icon is not showing, and I cannot remove appBar from emergencyHome.dart as I wont be able to add Tab bar. What is viable solution for this? Please help how to Structure by app and routes to easily manage navigation within app
Remove the appbar from EmergencyHome.dart
this will remove the second app title. But there will be that shadow from the first app bar so put elvation:0
so, this will look like one appbar now your drawer will also work.
you can use flexibleSpace in EmergencyHome.dart
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TabBar(
tabs: [
Tab(
//icon: Icon(Icons.more_vert),
text: "Report",
),
Tab(
text: "Ongoing",
),
Tab(
text: "Finished",
)
],
)
],
),
),
body: TabBarView(
children: [
ReportAnimalEmergency(),
OngoingAnimalEmergencies(),
FinishedAnimalEmergencies(),
],
),
)
);
You don't want to make two appbar to get the drawer property. Use DefaultTabController then inside that you can use scaffold.so, you can have drawer: Drawer() inside that you can also get a appbar with it with TabBar as it's bottom.
This is most suitable for you according to your use case.
i will put the full code below so you can copy it.
void main() {
runApp(const TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
const TabBarDemo({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
drawer: Drawer(),
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(
text: "report",
),
Tab(text: "ongoing"),
Tab(text: "completed"),
],
),
title: const Text('Tabs Demo'),
),
body: const TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
OUTPUT

how to make BottomNavigationBar with number and text flutter

I need to build a BottomNavigationBar with a text and a number as the photo below :
the name of the tab is will shown just when the app is active
how to do it ??
Basically this is exactly what you want: https://flutterawesome.com/a-modern-google-style-nav-bar-for-flutter/
I recomend you extracting this code and build it to your fits.
import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';
void main() => runApp(MaterialApp(
title: "GNav",
theme: ThemeData(
primaryColor: Colors.grey[800],
),
home: Example()));
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Likes',
style: optionStyle,
),
Text(
'Index 2: Search',
style: optionStyle,
),
Text(
'Index 3: Profile',
style: optionStyle,
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(blurRadius: 20, color: Colors.black.withOpacity(.1))
]),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
child: GNav(
gap: 8,
activeColor: Colors.white,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
duration: Duration(milliseconds: 800),
tabBackgroundColor: Colors.grey[800],
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart_o,
text: 'Likes',
),
GButton(
icon: LineIcons.search,
text: 'Search',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
),
],
selectedIndex: _selectedIndex,
onTabChange: (index) {
setState(() {
_selectedIndex = index;
});
}),
),
),
),
);
}
}
Link to repository and full code:
https://github.com/sooxt98/google_nav_bar

Flutter package Google_nav_bar - 3 tabs instead of 4

I am making an app using Flutter and really like the package google_nav_bar (link to Github). I got it installed and working but I can't figure out how to make the navbar 3 tabs instead of 4.
Here is my code:
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Reviews',
style: optionStyle,
),
Text(
'Index 1: Shop',
style: optionStyle,
),
Text(
'Index 2: Account',
style: optionStyle,
),
Text(
'Non existent',
style: optionStyle,
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Mijnmedicijn.nl'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(blurRadius: 20, color: Colors.black.withOpacity(.1))
]),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
child: GNav(
gap: 8,
activeColor: Colors.white,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
duration: Duration(milliseconds: 800),
tabBackgroundColor: Colors.grey[800],
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart_o,
text: 'Likes',
),
GButton(
icon: LineIcons.search,
text: 'Account',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
),
],
selectedIndex: _selectedIndex,
onTabChange: (index) {
setState(() {
_selectedIndex = index;
});
}),
),
),
),
);
}
}
I tried deleting one of the Text("non existent") and last GButton but that did not work (it gives me a RangeError).
It is possible because on Github it shows an example with 3 tabs.
Is there anybody who would know how to do this?
I tried your code and removed the last Text() and last GButton() and it seems to work fine.
Here is the code I tried :
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Reviews',
style: optionStyle,
),
Text(
'Index 1: Shop',
style: optionStyle,
),
Text(
'Index 2: Account',
style: optionStyle,
)
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Mijnmedicijn.nl'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(blurRadius: 20, color: Colors.black.withOpacity(.1))
]),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
child: GNav(
gap: 8,
activeColor: Colors.white,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
duration: Duration(milliseconds: 800),
tabBackgroundColor: Colors.grey[800],
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart_o,
text: 'Likes',
),
GButton(
icon: LineIcons.search,
text: 'Account',
)
],
selectedIndex: _selectedIndex,
onTabChange: (index) {
setState(() {
_selectedIndex = index;
});
}),
),
),
),
);
}
}
Hope it helps !

Why the Set State in Textfield doesn't work?

I want to work with textfields but it doesn't work. Visual Studio always shows an error and I don't know why. The string userText is static because Visual Studio Code wanted this. I even don't know what static means.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Home()));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
double mph;
int _currentIndex = 0;
static String userText = '';
final _pageOptions = [
Center(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(8.0),
margin: EdgeInsets.only(bottom: 20.0),
child: Text(
'Km/h',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.blue[400],
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Km/h',
focusColor: Colors.green[400],
),
onSubmitted: (String e){
setState(() {
userText = e;
});
},
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Text(
userText,
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20.0,
)
),
)
]
)
),
Text('Suche'),
Text('Kamera'),
Text('Profil'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Test"),
backgroundColor: Colors.green[400],
),
body: _pageOptions[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
iconSize: 30,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
backgroundColor: Colors.blue[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("Suche"),
backgroundColor: Colors.green[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.camera_alt),
title: Text("Kamera"),
backgroundColor: Colors.orange[400]
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("Profile"),
backgroundColor: Colors.purple[400]
),
],
onTap: (index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}
Short answer:
You're initialising it as instance variable, so you can't use setState in it.
final _pageOptions = [...]; // incorrect way
You can simply use getter and setState works in it. Like:
List<Widget> get _pageOptions => [...]; // correct way
Full answer:
void main() => runApp(MaterialApp(home: Home()));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
double mph;
int _currentIndex = 0;
static String userText = '';
List<Widget> get _pageOptions => [
Center(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(8.0),
margin: EdgeInsets.only(bottom: 20.0),
child: Text(
'Km/h',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.blue[400],
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Km/h',
focusColor: Colors.green[400],
),
onSubmitted: (String e){
setState(() {
userText = e;
});
},
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Text(
userText,
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20.0,
)
),
)
]
)
),
Text('Suche'),
Text('Kamera'),
Text('Profil'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Test"),
backgroundColor: Colors.green[400],
),
body: _pageOptions[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
iconSize: 30,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
backgroundColor: Colors.blue[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("Suche"),
backgroundColor: Colors.green[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.camera_alt),
title: Text("Kamera"),
backgroundColor: Colors.orange[400]
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("Profile"),
backgroundColor: Colors.purple[400]
),
],
onTap: (index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}