Related
I've tried to change the child from column to other types but still it didn't work. I'm not sure what's causing the error here but I'm suspecting its the screens[_currentindex] placement. Also when i click on one of the items in the bottom bar. The background color (dark blue) doesn't change to the color of my desired page. but current content disappears.
class _MyStatefulWidgetState extends State<focalPointProfile> {
**int _currentIndex = 0;**
Widget build(BuildContext context) {
**final List<Widget> screens = [
dashboardScreen(),
focalPointProfile(),
mentorRegistrationScreen(), ];**
return Scaffold(
resizeToAvoidBottomInset: false,
endDrawer: drawer(),
appBar: AppBar(
actions: [
Builder(
builder: (context) => IconButton(
icon: Icon((Icons.settings), color: Colors.green,),
onPressed: () => Scaffold.of(context).openEndDrawer(),
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
),
),
],
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
elevation: 1,
),
backgroundColor: Colors.blueGrey[800],
body: SafeArea(
minimum: const EdgeInsets.only(top: 100),
child: Column(
children: <Widget>[
Text(
name,
style: TextStyle(
fontSize: 40.0,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: "Source Sans Pro",
),
),
Text(
position,
style: TextStyle(
fontSize: 30,
color: Colors.blueGrey[200],
letterSpacing: 2.5,
fontWeight: FontWeight.bold,
fontFamily: "Source Sans Pro"),
),
SizedBox(
height: 20,
width: 200,
child: Divider(
color: Colors.white,
),
),
// we will be creating a new widget name info carrd
buildTextField(email, Icons.web),
**screens[_currentIndex],**
],
),
),
**bottomNavigationBar: NavigationBar(
height: 50,
selectedIndex: _currentIndex,
onDestinationSelected: (index) => setState(() => _currentIndex = index),
destinations: const [
NavigationDestination(icon: Icon(Icons.home), label: 'home'),
NavigationDestination(icon: Icon(Icons.person), label: 'profile'),
NavigationDestination(icon: Icon(Icons.add), label: 'Add Mentor'),
],
),**
);
}
class _MyStatefulWidgetState extends State<focalPointProfile>
cant be the same as here
**final List<Widget> screens = [
dashboardScreen(),
focalPointProfile(),
mentorRegistrationScreen(), ];
You can read it here.
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
on appbar, i want to return to previous page using icon. but it keep saying that the argument type 'context' cant be assigned to the parameter type 'BuildContext'.
AppBar app_bar_parking ({String title = ''}) {
return AppBar(
backgroundColor: Colors.white,
centerTitle: true,
title: Text('Parking & Pay'),
elevation: 0,
titleTextStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20),
leading: GestureDetector(
child: IconButton(
icon: Icon(Icons.arrow_back_ios_new_outlined,
size: 20,
color: Colors.lightBlue,),
onPressed: () {
Navigator.pop(context);
}
),
)
);
}
Because into your class you do not have a context declaration.
Add BuildContext context to the parameters you need.
AppBar app_bar_parking(BuildContext context, {String title = ''}) {
return AppBar(
backgroundColor: Colors.white,
centerTitle: true,
title: Text('Parking & Pay'),
elevation: 0,
titleTextStyle:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20),
leading: GestureDetector(
child: IconButton(
icon: Icon(
Icons.arrow_back_ios_new_outlined,
size: 20,
color: Colors.lightBlue,
),
onPressed: () {
Navigator.pop(context);
}),
));
}
and when you use your app_bar_parking remember to add the context as:
app_bar_parking(context, "MyTitle");
Pass the context in the function.
AppBar app_bar_parking ({String title = '',BuildContext context}) {
return AppBar(
backgroundColor: Colors.white,
centerTitle: true,
title: Text('Parking & Pay'),
elevation: 0,
titleTextStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20),
leading: GestureDetector(
child: IconButton(
icon: Icon(Icons.arrow_back_ios_new_outlined,
size: 20,
color: Colors.lightBlue,),
onPressed: () {
Navigator.pop(context);
}
),
)
);
}
Now use inside the build()
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: app_bar_parking('',context),
// rest of the code
);
}
Add BuildContext context in your function parameter. Basically, you have to use the same context.
app_bar_parking ({String title = '',BuildContext context}) {}
In my Flutter app the user can define a custom Theme by picking the colors from color pickers. After that they can save the ThemeData to a list and use it. The problem is that after the app restarts the ThemeData added by the user disappers. How can I store these ThemeData-s into the list to remain even after the app restarts?
Here is my code:
The ThemeData list:
I also have two ThemeData which is added by default.
List<ThemeData> toReturnTheme = <ThemeData>[];
List<ThemeData> getThemes() {
ThemeData szikraTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff5a89ba),
backgroundColor: Color(0xff5a89b0),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
ThemeData cobotTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff207ABB),
backgroundColor: Color(0xff207ABB),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
toReturnTheme.add(szikraTheme);
toReturnTheme.add(cobotTheme);
return toReturnTheme;
}
void addToThemeList(ThemeData theme){
toReturnTheme.add(theme);
}
The Button that adds the new ThemeData to the list:
Padding(
padding: const EdgeInsets.all(8.0),
child: TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Theme.of(context).accentColor,
)),
onPressed: () {
try {
ThemeData customTheme = ThemeData(
scaffoldBackgroundColor:
Color(bckgrndColor!.value),
backgroundColor: Color(bckgrndColor!.value),
buttonColor: Color(buttonColor!.value),
accentColor: Color(fontColor!.value),
floatingActionButtonTheme:
FloatingActionButtonThemeData(
backgroundColor: Color(arrowColor!.value),
),
textTheme: TextTheme(
bodyText2: TextStyle(
color: Color(fontColor!.value),
fontFamily: 'Muli'),
bodyText1: TextStyle(
color: Color(fontColor!.value),
fontFamily:
customThemeController.text)));
customThemeController.clear();
addToThemeList(customTheme);
saveTheme();
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
content: Text(
"themeCreated".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
} catch (e) {
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
backgroundColor: Colors.redAccent,
content: Text(
"chooseValidColors".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
}
setState(() {});
},
child: Text(
"createNewTheme".tr().toString(),
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 25.0,
),
)),
),
And the ListView that displays the list of ThemeData:
Container(
width: MediaQuery.of(context).size.width / 2,
height: 100,
child: ListView.builder(
shrinkWrap: true,
itemCount: toReturnTheme.length,
itemBuilder: (context, int index) {
if (index < 2) {
return Container();
} else {
return Container(
child: Column(
children: [
ListTile(
title: GestureDetector(
child: Text(
toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString() ==
""
? "Custom Theme"
: toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString(),
style: TextStyle(
fontSize: 22.0,
color: Theme.of(context)
.accentColor),
),
onTap: () {
getThemeManager(context)
.selectThemeAtIndex(index);
},
),
trailing: GestureDetector(
child: Icon(
Icons.delete,
color: Theme.of(context).accentColor,
),
onTap: () {
toReturnTheme.removeAt(index);
setState(() {});
},
),
leading: Icon(
Icons.palette_outlined,
color: Theme.of(context).accentColor,
),
),
],
),
);
}
}),
),
I am making my first Flutter App; enjoying it thus far. One annoying thing that I can not quite put my finger on, is that I have some ExpandedTiles, like so:
However, when the tile is expanded, the screen stays in the same position; like so:
What I would like, is if the app is scrolled down aa little bit when the ExpandedView is expanded.
I found this previous question, How to scroll an ExpansionTile / Listview when a tile is expanded? but that is a little different in that it just creates a list of the same items every time. I want the same functionality, but for 3 or 4 unique lists.
Widget build(BuildContext context) {
final title = 'Lunch Menu';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body:
ListView(
children:
<Widget>[
ListTile(
subtitle: Image.asset('assets/images/lunch-logo.jpg'),
title: ElevatedButton(
child: Text('Back'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeRoute()),
);
},
),
),
ListTile(
//leading: Image.asset('assets/images/lunch-logo.jpg'),
subtitle: Text('Enjoy our Lunch Options!',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
) ,
textAlign: TextAlign.center ,
),
),
ExpansionTile(
leading: Text(
'Starters',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
),
),
children:<Widget>[ ListTile(
leading: Image.asset('assets/images/food/image1.png'),
title: Text('Title1'),
isThreeLine: true,
subtitle: Text('Description 1') ,
),ListTile(
leading: Image.asset('assets/images/food/image2.png'),
title: Text('Title2'),
isThreeLine: true,
subtitle: Text('Description2') ,
),
Would appreciate if someone can give me a pointer on how to implement the scroll controller correctly.
You can create your own ScrollController and pass it to ListView, then when ExpansionTile expands, use onExpansionChanged to animate the controller and scroll a bit down
class ListViewExample extends StatefulWidget {
ListViewExample({Key key}) : super(key: key);
#override
_ListViewExampleState createState() => _ListViewExampleState();
}
class _ListViewExampleState extends State<ListViewExample> {
final ScrollController scroll = ScrollController();
#override
void dispose() {
scroll.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return ListView(
controller: scroll,
children: [
ListTile(
subtitle: Image.asset('assets/images/lunch-logo.jpg'),
title: ElevatedButton(
child: Text('Back'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeRoute()),
);
},
),
),
ListTile(
//leading: Image.asset('assets/images/lunch-logo.jpg'),
subtitle: Text('Enjoy our Lunch Options!',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
) ,
textAlign: TextAlign.center ,
),
),
ExpansionTile(
leading: Text(
'Starters',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
),
),
onExpansionChanged: (value) {
if (value)
scroll.animateTo(120, //this is a hardcoded value, would need some tweaking
duration: const Duration(milliseconds: 300),
curve: Curves.linear);
},
children: [
... //Your widgets
],
)
],
);
}
}
onExpansionChanged returns true when its expanding and false when collapsing, you can use those values and check the scroll offset to know if you need to animate the scroll to move downward
try this if you use listview and other scrollable, very helpfully
https://medium.com/flutter-community/flutter-how-to-scroll-an-expansiontile-when-it-is-expanded-ad706cfb80a6
I created a search function with new class extends SearchDelegate. And I want to custom appBar background color, font size. How to achieve this?
My search class
import 'package:flutter/material.dart';
class Search extends SearchDelegate {
final List countryList;
Search(this.countryList);
#override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
query = '';
},
)
];
}
#override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
);
}
#override
Widget buildResults(BuildContext context) {
return Container();
}
#override
Widget buildSuggestions(BuildContext context) {
final suggestionList = query.isEmpty
? countryList
: countryList
.where((element) =>
element['country'].toString().toLowerCase().startsWith(query))
.toList();
return ListView.builder(
itemCount: suggestionList.length,
itemBuilder: (context, index) {
return Card(
child: Container(
height: 70,
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: <Widget>[
Container(
width: 200,
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
suggestionList[index]['country'],
style: TextStyle(fontWeight: FontWeight.bold),
),
Image.network(
suggestionList[index]['countryInfo']['flag'],
height: 50,
width: 60,
),
],
),
),
Expanded(
child: Container(
child: Column(
children: <Widget>[
Text(
'CONFIRMED:' +
suggestionList[index]['cases'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
Text(
'ACTIVE:' + suggestionList[index]['active'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
Text(
'RECOVERED:' +
suggestionList[index]['recovered'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
Text(
'DEATHS:' + suggestionList[index]['deaths'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).brightness == Brightness.dark
? Colors.grey[100]
: Colors.grey[900],
),
),
],
),
))
],
),
),
);
},
);
}
}
This class create a appbar like this
When I try to change backgound color use
ThemeData appBarTheme(BuildContext context) {
return ThemeData(
primaryColor: Color(0xff202c3b),
);
}
Background color changed but some style are changed too
I want to custom a little bit style like
Font size bigger
Font color to white
Don't use underline
How to achieve this? I can't find any TextStyle or something like that
EDITED
CountryPage class for use search
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:tgd_covid_tracker/pages/search.dart';
class CountryPage extends StatefulWidget {
#override
_CountryPageState createState() => _CountryPageState();
}
class _CountryPageState extends State<CountryPage> {
List countryData;
fetchCountryData() async {
if (this.mounted) {
http.Response response =
await http.get('https://corona.lmao.ninja/v2/countries');
setState(() {
countryData = json.decode(response.body);
});
}
}
#override
void initState() {
fetchCountryData();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
actions: <Widget>[
countryData == null
? Container()
: searchButton(
context,
countryData,
),
],
title: Text('Country Stats'),
),
body: countryData == null
? Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemBuilder: (context, index) {
return Card(
child: Container(
height: 70,
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: <Widget>[
Container(
width: 200,
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
countryData[index]['country'],
style: TextStyle(fontWeight: FontWeight.bold),
),
Image.network(
countryData[index]['countryInfo']['flag'],
height: 50,
width: 60,
),
],
),
),
Expanded(
child: Container(
child: Column(
children: <Widget>[
Text(
'CONFIRMED:' +
countryData[index]['cases'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
Text(
'ACTIVE:' +
countryData[index]['active'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
Text(
'RECOVERED:' +
countryData[index]['recovered']
.toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
Text(
'DEATHS:' +
countryData[index]['deaths'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).brightness ==
Brightness.dark
? Colors.grey[100]
: Colors.grey[900],
),
),
],
),
),
)
],
),
),
);
},
itemCount: countryData == null ? 0 : countryData.length,
),
);
}
}
Widget searchButton(BuildContext context, countryData) {
return IconButton(
icon: Icon(Icons.search),
onPressed: () {
showSearch(context: context, delegate: Search(countryData));
},
);
}
The following works flawlessly:
class CustomSearchDelegate extends SearchDelegate {
#override
ThemeData appBarTheme(BuildContext context) {
return ThemeData(
textTheme: TextTheme(
// Use this to change the query's text style
headline6: TextStyle(fontSize: 24.0, color: Colors.white),
),
appBarTheme: const AppBarTheme(
backgroundColor: Colors.green,
),
inputDecorationTheme: InputDecorationTheme(
border: InputBorder.none,
// Use this change the placeholder's text style
hintStyle: TextStyle(fontSize: 24.0),
),
);
}
}
You can provide style to the title like this:
title: Text("MyApp", style:TextStyle(color:Colors.black,fontWeight:FontWeight.w300,fontSize:20)
and for the underline add the following attribute
decoration:TextDecoration.none
you have to add this in AppBar() properties.
So finally:
title: Text("MyApp",
style:TextStyle(
color:Colors.black,
fontWeight:FontWeight.w300,
fontSize:20,
decoration:TextDecoration.none
)
I understand the issue, and my solution won't fix the whole problem, but if what you want is just change some of the appBarTheme properties, you can do so by using the .copyWith method and indicating what are the properties that you want to override.
#override
ThemeData appBarTheme(BuildContext context) {
// TODO: implement appBarTheme
return super.appBarTheme(context).copyWith(//OVERRIDE PROPERTIES HERE);
}
You can override your appBarTheme like this :
#override
ThemeData appBarTheme(BuildContext context) {
assert(context != null);
final ThemeData theme = Theme.of(context).copyWith(
appBarTheme: AppBarTheme(
color: Colors.black, //new AppBar color
elevation: 0,
),
textTheme: TextTheme(
headline6: TextStyle(
color: Colors.white,
),
),
);
}
You could use appBarTheme Method from SearchDelegate class for changing AppBar Theme. (https://api.flutter.dev/flutter/material/SearchDelegate-class.html)
Examples:
// Default App Theme
#override
ThemeData appBarTheme(BuildContext context) {
return Theme.of(context);
}
// Changing AppBar color only for current AppBar
#override
ThemeData appBarTheme(BuildContext context) {
return Theme.of(context).copyWith(
appBarTheme: Theme.of(context).appBarTheme.copyWith(
color: const Color(0xff202c3b),
),
);
}