Shape of FilterChip in flutter - flutter

I want to design this type of layout but I don't know how to give shape to FilterChip
but I'm getting this layout
My code is
class FilterChipWidget extends StatefulWidget {
final String chipName;
const FilterChipWidget({Key? key, required this.chipName}) : super(key: key);
#override
_FilterChipWidgetState createState() => _FilterChipWidgetState();
}
class _FilterChipWidgetState extends State<FilterChipWidget> {
var _isSelected = false;
#override
Widget build(BuildContext context) {
return FilterChip(
showCheckmark: false,
label: Text(widget.chipName),
labelStyle: GoogleFonts.robotoSlab(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: 13,
color: Colors.black),
selected: _isSelected,
backgroundColor: fTextFieldColor,
onSelected: (isSelected) {
setState(() {
_isSelected = isSelected;
});
},
selectedColor: Colors.blueAccent,
);
}
}
interest.dart
Align(
alignment: Alignment.center,
child: Container(
child: Wrap(
spacing: 5.0,
runSpacing: 5.0,
children: [
FilterChipWithImageWidget(chipName: 'Stocks'),
FilterChipWidget(chipName: 'Crypto'),
FilterChipWidget(chipName: 'Market'),
FilterChipWidget(chipName: 'Jobs'),
FilterChipWidget(chipName: 'Investment'),
FilterChipWidget(chipName: 'Entrepreneur'),
FilterChipWidget(chipName: 'Business'),
FilterChipWidget(chipName: 'Venture\nCapital'),
FilterChipWidget(chipName: 'Advertise'),
],
),
),
)

FilterChip accepts a value named shape. You can define it as shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ) or you can use container and customise it
return InkWell(
onTap:(){
setState((){
_isSelected = !_isSelected;
});
},
child:Container(
decoration: BoxDecoration(
color: _isSelected? Colors.blueAccent : fTextFieldColor,
borderRadius:BorderRadius.circular(5),
),
child: Row(
mainAxisSize:MainAxisSize.min,
children:[
Image.asset("image path here", width:15),
Text(widget.chipName, style: GoogleFonts.robotoSlab(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: 13,
color: Colors.black),),
]
)
)
);
use this instead of returning FilterChip.

Related

Search Bar Shows Result if Search Term is not Contained Inside Names

I'm working on a big company project and a screen needed search bar but it works ok when you type one Letter or two but then if you continue to type in search it shows the whole names in it how do i fix this i want the list to show nothing when search term is wrong
import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:reports/core/locale/locale_helper.dart';
import 'package:reports/core/util/constants.dart';
import 'package:reports/core/util/my_icons.dart';
import 'package:reports/core/util/responsive.dart';
import 'package:reports/features/reports/presentation/widgets/report_app_bar.dart';
import '../../../../../core/util/my_colors.dart';
class Marketer extends Equatable {
Marketer({
required this.name,
required this.code,
});
late String name;
final int code;
#override
List<Object?> get props => [code];
}
class Marketerselect extends StatefulWidget {
Marketer? selectedValue;
Marketerselect({
Key? key,
this.selectedValue,
}) : super(key: key);
#override
State<Marketerselect> createState() => _MarketerselectState();
}
class _MarketerselectState extends State<Marketerselect> {
final TextEditingController _controller = TextEditingController();
List<Marketer> marketerInfo = [
Marketer(name: 'امیررضا مرادی', code: 1),
Marketer(name: 'محمد علی سالان', code: 2),
Marketer(name: 'مهدی قلیزاده ', code: 3),
Marketer(name: 'آرش نوری', code: 4),
Marketer(name: 'نعیم لطفعلی', code: 5),
];
List<Marketer> searchList = [];
#override
void initState() {
_controller.addListener(() {
setState(() {
if (_controller.text.isNotEmpty) {
searchList.clear();
for (var marketer in marketerInfo) {
if (marketer.name.contains(_controller.text)) {
searchList.add(marketer);
}
}
} else {
searchList.clear();
}
});
});
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return ResponsiveWidget(
context: context,
mobile: Directionality(
textDirection: getDirection(context),
child: Scaffold(
appBar: ReportAppBar(
title: 'بازایاب',
hasLeadingWidget: true,
controller: _controller,
isDialog: true,
),
body: Card(
elevation: 8.0,
shadowColor: Colors.grey,
margin: const EdgeInsetsDirectional.only(top: 16),
child: ListView.builder(
itemCount: searchList.isEmpty ? marketerInfo.length : searchList.length,
itemBuilder: (context, index) {
return RadioListTile<Marketer?>(
value: searchList.isNotEmpty ? searchList[index] : marketerInfo[index],
groupValue: widget.selectedValue,
tileColor: Colors.white,
onChanged: (value) {
setState(() {
widget.selectedValue = value!;
Navigator.of(context).pop(value);
});
},
title: Text(
searchList.contains(marketerInfo[index]) ? searchList[index].name : searchList[index].name,
style: const TextStyle(
fontSize: 15.0,
color: MyColor.mine,
fontFamily: Constants.fontFamily,
),
),
);
}),
),
)),
web: Directionality(
textDirection: getDirection(context),
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
title: const Text(
'بازاریاب',
style: TextStyle(
fontSize: 15.0,
color: MyColor.mine,
fontFamily: Constants.fontFamily,
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: TextField(
keyboardType: TextInputType.text,
controller: _controller,
decoration: InputDecoration(
suffixIcon: Padding(
padding: const EdgeInsetsDirectional.only(end: 16.0),
child: Image.asset(MyIcons.search, color: Colors.black, alignment: AlignmentDirectional.centerEnd)),
hintText: 'جستوجو در لیست بازاریاب ها',
hintStyle: const TextStyle(
fontFamily: Constants.fontFamily,
fontWeight: FontWeight.w400,
fontSize: 12.0,
),
filled: true,
fillColor: Colors.white,
),
style: const TextStyle(
fontSize: 18.0,
color: MyColor.mine,
fontFamily: Constants.fontFamily,
))),
),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: searchList.isEmpty ? marketerInfo.length : searchList.length,
itemBuilder: (context, index) {
return RadioListTile<Marketer?>(
value: searchList.isNotEmpty ? searchList[index] : marketerInfo[index],
groupValue: widget.selectedValue,
tileColor: Colors.white,
onChanged: (value) {
setState(() {
widget.selectedValue = value!;
});
},
title: Text(
searchList.isNotEmpty ? searchList[index].name : marketerInfo[index].name,
style: const TextStyle(
fontSize: 15.0,
color: MyColor.mine,
fontFamily: Constants.fontFamily,
),
),
);
}),
),
const Divider(
color: MyColor.mercury,
thickness: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(bottom: 8.0, end: 8.0),
child: MaterialButton(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
onPressed: () {
Navigator.of(context).pop(widget.selectedValue);
},
color: MyColor.main,
child: const Text(
'تأیید',
style: TextStyle(
fontSize: 14.0,
color: Colors.white,
fontFamily: Constants.fontFamily,
),
),
),
)
],
),
],
),
))).get();
}
}
This is the whole page with data and search bar in it
It would be appreciated if anyone could help me

How to make Single Selectable custom button in Flutter

I am new in Flutter Development, I am practicing on an app of Airline Booking where user have to select a cabin of Airplane through tapping a button. So, I don't know the type of mentioned buttons and background functions, could anyone like to help me?
import 'package:flutter/material.dart';
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
#override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
#override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}
You can call onPressed method on ToggleButtons and use like
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
Full widget
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
#override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
#override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}

Flutter TabController late initializer

I am creating an app and I am working on the profile setup and am using a tabcontroller. I have my tabcontroller working to navigate my first 3 screens, but for some reason I get a "late initializtion" error for my last screen. I have a custom button that I use for each screen, and the error gets shown once I add the custom button to my last acrren. Could someone explain to me what I need to do to get it working for my last screen? I've attached my code for the tabcontroller, custom button, and my last screen:
Tabcontroller onboarding model:
class AccountOnboarding extends StatefulWidget {
const AccountOnboarding({Key? key}) : super(key: key);
#override
State<AccountOnboarding> createState() => _AccountOnboardingState();
}
class _AccountOnboardingState extends State<AccountOnboarding> {
static const List<Tab> tabs = <Tab>[
Tab(text: 'Name'),
Tab(text: 'Age and Profile'),
Tab(text: 'Bio and Interests'),
Tab(text: 'Selection')
];
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: tabs.length,
child: Builder(builder: (BuildContext context) {
final TabController tabController = DefaultTabController.of(context)!;
tabController.addListener(() {
if (!tabController.indexIsChanging) {}
});
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: const Color(0xff31708c),
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.transparent,
elevation: 0,
title: Row(
children: [
Expanded(
child: Image.asset('assets/images/Logo_Strength.png',
height: 50),
),
Expanded(
flex: 2,
child: RichText(
text: TextSpan(
style: GoogleFonts.montserrat(
fontSize: 30),
children: <TextSpan> [
TextSpan(text: 'Stren',
style: GoogleFonts.montserrat(
color: Colors.white,
fontWeight: FontWeight.bold,
letterSpacing: 1,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.7),
offset: const Offset(1.5, 0.0))
])),
TextSpan(text: ';',
style: GoogleFonts.montserrat(
color: const Color(0xffef6a7a), fontWeight: FontWeight.bold,
letterSpacing: 1,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.7),
offset: const Offset(1.5, 0.0))
])),
TextSpan(text: 'th',
style: GoogleFonts.montserrat(
color: Colors.white,
fontWeight: FontWeight.bold,
letterSpacing: 1,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.7),
offset: const Offset(1.5, 0.0))
]))
],
),
),
),
],
)
),
body: TabBarView(
// physics: const NeverScrollableScrollPhysics(),
children: [
NamePage(tabController: tabController,),
ageAndPicture(tabController: tabController,),
bioAndInterests(tabController: tabController,),
SelectionPage(tabController: tabController,)
],
),
);
}));
}}
Custom Button:
class CustomButton extends StatelessWidget {
final TabController tabController;
const CustomButton({Key? key,
required this.tabController})
: super(key: key);
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.white
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
vertical: 16),
elevation: 0,
primary: Colors.transparent
),
onPressed: () {
tabController.animateTo(tabController.index + 1);
},
child: Container(
width: double.infinity,
child: Center(
child: Text('Continue',
style: GoogleFonts.montserrat(
color: const Color.fromARGB(255, 20, 83, 106),
fontSize: 19,
fontWeight: FontWeight.w600
),),
),
)
),
);
}
}
Last Screen code:
class SelectionPage extends StatefulWidget {
final TabController tabController;
const SelectionPage({Key? key,
required this.tabController}) : super(key: key);
#override
_SelectionPageState createState() => _SelectionPageState();
}
class _SelectionPageState extends State<SelectionPage>{
List <Item>listOfModel = [];
late TabController tabController;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
String retrieveString;
final data = ModalRoute.of(context)!.settings;
if (data.arguments == null) {
retrieveString = "empty";
} else {
retrieveString = data.arguments as String;
}
listOfModel.add(Item(title: "Maintaining healthy relationships"));
listOfModel.add(Item(title: "Stress and anxiety management"));
listOfModel.add(Item(title: "Maintaing a better work-life balance"));
listOfModel.add(Item(title: "Personal growth and development"));
listOfModel.add(Item(title: "Being happier and more content in life"));
listOfModel.add(Item(title: "Mental and emotional well-being"));
double _height = MediaQuery.of(context).size.height;
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: const Color(0xff31708c),
body: Padding(
padding: EdgeInsets.only(
left: 30,
right: 30,
top: _height * 0.07,
bottom: _height * 0.05),
child: Column(
children: [
Column(
children: [
Column(
children: <Widget>[
Text('Hello there $retrieveString! What all would you like to focus on?',
style: GoogleFonts.montserrat(
color: Colors.white70,
fontSize: 19,
fontWeight: FontWeight.w600
),
textAlign: TextAlign.center,),
const SizedBox(height: 10),
Text("You can pick all that apply:",
style: GoogleFonts.montserrat(
color: Colors.white70,
fontSize: 14.5,
fontWeight: FontWeight.w600
),),
const SizedBox(height: 15,),
GridView.count(
primary: true,
shrinkWrap: true,
padding: const EdgeInsets.all(10),
childAspectRatio: 1.15,
crossAxisCount: 2,
crossAxisSpacing: 25,
mainAxisSpacing: 25,
children: [
gridItem(listOfModel[0],MyFlutterApp.relationships),
gridItem(listOfModel[1],MyFlutterApp2.meditate),
gridItem(listOfModel[2],MyFlutterApp.balance),
gridItem(listOfModel[3],MyFlutterApp2.personal_growth),
gridItem(listOfModel[4],MyFlutterApp.happy),
gridItem(listOfModel[5],MyFlutterApp3.well_rounded),
],
),
const SizedBox(height: 18,),
],
),
CustomButton(tabController: tabController)
],
),
],
),
),
);
}
Widget gridItem(Item item, IconData icon){
return GestureDetector(
onTap: () {
setState(() {
item.isSelected = !item.isSelected;
});
},
child: Stack(
children: [Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: const Color.fromARGB(255, 20, 83, 106),
width: 2.5),
color: item.isSelected ? Color.fromARGB(255, 234, 188, 193) : Colors.white
),
child: Column(
children: [
Align(alignment: Alignment.topCenter,
child: Icon(
icon,
color: const Color(0xff31708c),
size: 45,
),
),
const SizedBox(height: 4,),
Text(item.title,
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: const Color(0xff31708c)
),
textAlign: TextAlign.center,),
],
),
),
Positioned(
top: 0,
right: 0,
child: Offstage(
offstage: !item.isSelected,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(width: 2.5),
shape: BoxShape.circle),
child: const Icon(
Icons.check,
color: Colors.green,
),
),
),
)
],
)
);
}
}
class Item{
String title;
bool isSelected;
Item({required this.title, this.isSelected = false});
}
Remove
late TabController tabController;
in SelectionPage and change
CustomButton(tabController: tabController)
in SelectionPage to
CustomButton(tabController: widget.tabController)

half of flutter form works

for some reason the sign up allows users to enter information but the sign in section doesn't any ideas
import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
import 'package:personal_fitness_app/components/widgets/input_text.dart';
class SignUpView extends StatefulWidget {
final double keyboardsize;
final AnimationController parent_controller;
final AnimationController sign_up_controller;
final VoidCallback onLoginClicked;
const SignUpView(this.keyboardsize, this.parent_controller, this.sign_up_controller, this.onLoginClicked) : super();
#override
SignUpViewState createState() => SignUpViewState(keyboardsize, parent_controller, sign_up_controller,onLoginClicked);
}
class SignUpViewState extends State<SignUpView> with SingleTickerProviderStateMixin {
final double keyboardsize;
final AnimationController parent_controller;
final AnimationController sign_up_controller;
final VoidCallback onLoginClicked;
SignUpViewState(this.keyboardsize, this.parent_controller, this.sign_up_controller, this.onLoginClicked);
#override
Widget build(BuildContext context) {
final _signUpAnimation = Tween<Offset>(begin: Offset(0,-2), end: Offset(-0,0)).animate(
CurvedAnimation(
parent: parent_controller,
curve: const Interval(0.5, 1.0, curve: Curves.fastOutSlowIn)
)
);
final _change_to_login = Tween<Offset>(begin: Offset(0,0), end: Offset(0,2)).animate(
CurvedAnimation(
parent: sign_up_controller,
curve: const Interval(0.0, 1.0, curve: Curves.fastOutSlowIn)
));
final _login_coming_in = Tween<Offset>(begin: Offset(2,0), end:Offset(0,0)).animate(
CurvedAnimation(
parent: sign_up_controller,
curve: const Interval(0.0, 1.0, curve: Curves.fastOutSlowIn)
)
);
const statusBarHeight = 24;
const marginBottom = 30;
const bottomPosition = 28;
return Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
bottom: 0,
child: Container(
height: 50,
width: MediaQuery.of(context).size.width * .74,
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor.withOpacity(.2),
borderRadius: BorderRadius.circular(10)
),
),
),
Positioned(
bottom: 14,
child: Container(
height: 50,
width: MediaQuery.of(context).size.width * .83,
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor.withOpacity(.2),
borderRadius: BorderRadius.circular(10)
),
),
),
Positioned(
bottom: 28,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight:
MediaQuery.of(context).size.height
- statusBarHeight
- keyboardsize
- marginBottom
- bottomPosition
),
child: Container(
width: MediaQuery.of(context).size.width * .9,
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(10)
),
child: Stack(children: [
SlideTransition(position:_signUpAnimation,child:SingleChildScrollView(
child:Opacity(opacity:parent_controller.value,child:Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 25),
child: SlideTransition(position:_login_coming_in,
child:Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_SignInTitle(),
_Subtitle(),
SizedBox(height: 30),
_SignInForm(parent_controller),
SizedBox(height: 20),
_DontHaveAccount(parent_controller, onLoginClicked),
]
),
)
)
),
)),
SlideTransition(position:_signUpAnimation,child:SingleChildScrollView(
child:Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 25),
child: SlideTransition(position:_change_to_login,
child:Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_SignUpTitle(),
_Subtitle(),
SizedBox(height: 30),
_SignUpForm(parent_controller),
SizedBox(height: 20),
_HaveAccount(parent_controller, onLoginClicked),
]
),
)
),
)
)
],),
),
),
)
],
);
}
}
class _SignUpTitle extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Text(
'SIGN UP',
style: Theme.of(context)
.textTheme
.headline5!
.copyWith(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold
),
);
}
}
class _SignInTitle extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Text(
'SIGN IN',
style: Theme.of(context)
.textTheme
.headline5!
.copyWith(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold
),
);
}
}
class _Subtitle extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Text(
'Come on!',
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Theme.of(context).primaryColor
),
);
}
}
class _SignUpForm extends StatelessWidget {
final AnimationController animationController;
const _SignUpForm(this.animationController);
#override
Widget build(BuildContext context) {
return Form(
child: Column(
children: <Widget>[
Column(children: <Widget>[
InputText(label: 'Username', icon: Ionicons.person),
InputText(label: 'Email Address', icon: Ionicons.phone_landscape),
InputText(label: 'Password', icon: Ionicons.key,),
SizedBox(height: 40),
_SignUpSubmitButton(),
],
),
],
)
);
}
}
class _SignInForm extends StatelessWidget {
final AnimationController animationController;
const _SignInForm(this.animationController);
#override
Widget build(BuildContext context) {
return Form(
child: Column(
children: <Widget>[
Column(children: <Widget>[
InputText(label: 'Username', icon: Ionicons.person),
InputText(label: 'Password', icon: Ionicons.key,),
SizedBox(height: 40),
_SignInSubmitButton(),
],
),
],
)
);
}
}
class _SignUpSubmitButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return RaisedButton(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(100.0)),
padding: const EdgeInsets.symmetric(vertical: 17, horizontal: 80),
onPressed: () {
print("sign up button pressed");
},
child: Text(
'SIGN UP',
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
color: Theme.of(context).primaryColor
);
}
}
class _SignInSubmitButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return RaisedButton(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(100.0)),
padding: const EdgeInsets.symmetric(vertical: 17, horizontal: 80),
onPressed: () {
print("sign in button pressed");
},
child: Text(
'SIGN IN',
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
color: Theme.of(context).primaryColor
);
}
}
class _HaveAccount extends StatelessWidget {
final AnimationController animationController;
final VoidCallback onLoginClicked;
const _HaveAccount(this.animationController, this.onLoginClicked);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => onLoginClicked(),
child: Container(
width: double.infinity,
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Already have an account? ',
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Colors.grey
),
children: <TextSpan>[
TextSpan(
text: 'Sign In',
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold
)
),
],
),
),
),
);
}
}
class _DontHaveAccount extends StatelessWidget {
final AnimationController animationController;
final VoidCallback onLoginClicked;
const _DontHaveAccount(this.animationController, this.onLoginClicked);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => {print(animationController.value)},
child: Container(
width: double.infinity,
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Don\'t have an account? ',
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Colors.grey
),
children: <TextSpan>[
TextSpan(
text: 'Sign Up',
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold
)
),
],
),
),
),
);
}
}
input_text.dart
import 'package:flutter/material.dart';
class InputText extends StatelessWidget {
final String label;
final IconData icon;
const InputText({ required this.label, required this.icon}) : super();
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: TextFormField(
cursorColor: Theme.of(context).primaryColor,
decoration: InputDecoration(
labelText: this.label,
fillColor: Colors.grey[200],
filled: true,
border: const OutlineInputBorder(
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
),
prefixIcon: Icon(
this.icon,
color: Theme.of(context).primaryColor,
),
),
),
);
}
}
the main problem i am having is that the already have an account goes to the sign up animation successfully but the dont have an acccount button doesnt work neither does the input fields and the button. all help is appreciated

How to get value from a list of values in flutter

I have three containers with different information(Strings and Icon) in each and that I want to put in a column.
I want to get the value of the clicked one and want to change the color of the container when clicked, how can I do that, please?
Also, I want to get the value of the strings selected
I think it's simple but I seem not to find a way to do that.
This is my Container widget:
class VisitTypeFees extends StatelessWidget {
const VisitTypeFees({
Key key,
this.onSelected = false,
this.title,
this.subTitle,
this.amount,
this.icon,
}) : super(key: key);
final bool onSelected;
final String title, subTitle, amount;
final IconData icon;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {},
child: Container(
height: getProportionateScreenHeight(65),
width: SizeConfig.screenWidth - 20,
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(10),
vertical: getProportionateScreenWidth(7.5),
),
decoration: BoxDecoration(
color: onSelected ? kSecondaryColor : Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [kDefaultShadow]
),
child: Row(
children: [
Container(
height: getProportionateScreenHeight(50),
width: getProportionateScreenHeight(50),
decoration: BoxDecoration(
color: onSelected
? Colors.white
: kPrimaryLightColor.withOpacity(0.6),
borderRadius: BorderRadius.circular(10)),
child: Icon(
icon,
color: onSelected ? kSecondaryColor : kPrimaryColor,
),
),
SizedBox(
width: getProportionateScreenWidth(7.5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title,
style: TextStyle(
color: onSelected ? Colors.white : Colors.black,
fontSize: getProportionateScreenWidth(15),
fontWeight: FontWeight.w600),
),
Text(
subTitle,
style: TextStyle(
color: onSelected ? Colors.white : kTextColor,
fontSize: getProportionateScreenWidth(12),
fontWeight: FontWeight.w500),
),
],
),
Spacer(),
Text(
amount,
style: TextStyle(
color: onSelected ? Colors.white : kPrimaryColor,
fontSize: getProportionateScreenWidth(15),
fontWeight: FontWeight.bold),
),
],
),
),
);
}
}
At first, you need to convert your widget to a StatefulWidget. Then, you need to wrap with InkWell widget for each Text and Icon widget. And they will all have isSelected properties themselves.
It will look like this:
class VisitTypeFees extends StatefulWidget {
const VisitTypeFees({
Key key,
this.onSelected = false,
this.title,
this.subTitle,
this.amount,
this.icon,
}) : super(key: key);
final bool onSelected;
final String title, subTitle, amount;
final IconData icon;
#override
_VisitTypeFeesState createState() => _VisitTypeFeesState();
}
class _VisitTypeFeesState extends State<VisitTypeFees> {
bool iconSelected;
bool firstTextSelected;
bool seccondTextSelected;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {},
child: Container(
height: getProportionateScreenHeight(65),
width: SizeConfig.screenWidth - 20,
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(10),
vertical: getProportionateScreenWidth(7.5),
),
decoration: BoxDecoration(
color: widget.onSelected ? kSecondaryColor : Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [kDefaultShadow]),
child: Row(
children: [
InkWell(
onTap: () {
// icon selected!
setState(() {
iconSelected = true;
firstTextSelected = false;
seccondTextSelected = false;
});
},
child: Container(
height: getProportionateScreenHeight(50),
width: getProportionateScreenHeight(50),
decoration: BoxDecoration(
color: widget.onSelected
? Colors.white
: kPrimaryLightColor.withOpacity(0.6),
borderRadius: BorderRadius.circular(10)),
child: Icon(
widget.icon,
color: widget.onSelected ? kSecondaryColor : kPrimaryColor,
),
),
),
SizedBox(
width: getProportionateScreenWidth(7.5),
),
InkWell(
onTap: () {
// first text - title and subtitle selected!
setState(() {
iconSelected = false;
firstTextSelected = true;
seccondTextSelected = false;
});
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
widget.title,
style: TextStyle(
color: widget.onSelected ? Colors.white : Colors.black,
fontSize: getProportionateScreenWidth(15),
fontWeight: FontWeight.w600),
),
Text(
widget.subTitle,
style: TextStyle(
color: widget.onSelected ? Colors.white : kTextColor,
fontSize: getProportionateScreenWidth(12),
fontWeight: FontWeight.w500),
),
],
),
),
Spacer(),
InkWell(
onTap: () {
// second text - amount selected.
setState(() {
iconSelected = false;
firstTextSelected = false;
seccondTextSelected = true;
});
},
child: Text(
widget.amount,
style: TextStyle(
color: widget.onSelected ? Colors.white : kPrimaryColor,
fontSize: getProportionateScreenWidth(15),
fontWeight: FontWeight.bold),
),
),
],
),
),
);
}
}