[ad_1]
So I received some vehicles with all of the technical knowledge (high velocity, horsepower, and so forth.) saved in my backend and my app will get all this knowledge. Like you’ll be able to see in my first screenshot (SC1) the consumer chooses what sort of automotive he’s searching for and when he presses on this yellow button a bottomsheet seems (SC2) (SC3) and he can choose the totally different traits of the automotive.
What I am attempting to realize is that the merchandise which was chosen by the consumer is displayed when he closes the bottomsheet once more. So principally it shall be displayed what was chosen, for instance on (SC1) proper behind the textual content “Model”, “Worth”, and so forth.
That is the code of the primary Screenshot (SC1):
class SearchTab extends StatefulWidget {
const SearchTab({Key key}) : tremendous(key: key);
@override
_SearchTabState createState() => _SearchTabState();
}
class _SearchTabState extends State<SearchTab> {
ScrollController _scrollController;
@override
void initState() {
_scrollController = ScrollController();
tremendous.initState();
}
bool _more = false;
@override
Widget construct(BuildContext context) {
closing FilterProvider filterProvider = Supplier.of<FilterProvider>(context);
return filterProvider.isLoading // --- DAS WAR DAVOR DA! ---
? Container(
constraints: const BoxConstraints.develop(),
ornament: const BoxDecoration(
gradient: LinearGradient(
colours: [
Color(0xffFEFDFD),
Color(0xffBDBDB2),
],
start: Alignment.topLeft,
finish: Alignment.bottomRight,
),
),
baby: Middle(
baby: CupertinoActivityIndicator(
// CircularProgressIndicator(
// shade: Colours.gray,
// ),
),
),
)
: Container(
constraints: const BoxConstraints.develop(),
ornament: const BoxDecoration(
gradient: LinearGradient(
colours: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
start: Alignment.topCenter,
finish: Alignment.bottomCenter),
),
baby: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0,
0), //Unique: const EdgeInsets.fromLTRB(15, 20, 15, 0),
baby: Scrollbar(
controller: _scrollController,
baby: SingleChildScrollView(
physics: BouncingScrollPhysics(),
controller: _scrollController,
baby: Padding(
padding: const EdgeInsets.all(15.0),
baby: Column(
kids: <Widget>[
FilterButtonWidget(
title: 'Brand',
item: constants.brand,
type: 'brand',
),
FilterButtonWidget(
title: 'Price',
item: constants.price,
type: 'price',
),
FilterButtonWidget(
title: 'Engine Power [kW]',
merchandise: constants.enginepower,
sort: 'engine',
),
FilterButtonWidget(
title: 'Vary',
merchandise: constants.vary,
sort: 'vary',
),
FilterButtonWidget(
title: 'Battery [kWh]',
merchandise: constants.battery,
sort: 'battery',
),
FilterButtonWidget(
title: 'Loading Energy [kW]',
merchandise: constants.chargingpower,
sort: 'charging',
),
FilterButtonWidget(
title: 'Prime velocity',
merchandise: constants.topspeed,
sort: 'high',
),
GestureDetector(
onTap: () {
setState(() => _more = !_more);
_scrollController.animateTo(
_more
? _scrollController.offset +
MediaQuery.of(context).measurement.peak * .3
: _scrollController
.place.minScrollExtent,
curve: _more ? Curves.easeIn : Curves.easeOut,
period: const Length(milliseconds: 500));
},
const SizedBox(peak: 20),
],
),
),
),
),
),
);
}
}
And that is the code of my FilterButtonWidget:
class FilterButtonWidget extends StatelessWidget {
const FilterButtonWidget({
Key key,
this.title,
this.merchandise,
this.sort,
}) : tremendous(key: key);
closing String title;
closing dynamic merchandise;
closing String sort;
@override
Widget construct(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
baby: Stack(
kids: <Widget>[
Container(
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: const LinearGradient(
colors: [Colors.white, Colors.white],
start: Alignment.topLeft,
finish: Alignment.bottomRight),
boxShadow: const [
BoxShadow(
color: Colors.grey,
blurRadius: 0,
offset: Offset(0, 0),
),
],
),
),
Row(
kids: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
child: Text(
title,
style: const TextStyle(
fontFamily: 'Avenir',
fontSize: 16.0,
fontWeight: FontWeight.w500,
color: Colors.black,
),
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 4, 0),
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(const Color(0xffF2F2F2)),
padding:
MaterialStateProperty.all(const EdgeInsets.all(0.0)),
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(7.0),
),
),
),
overlayColor: MaterialStateColor.resolveWith(
(states) => Colors.transparent),
foregroundColor: MaterialStateColor.resolveWith(
(states) => Color(0xff424242)),
),
//minWidth: 70,
child: Ink(
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xffFBD23E),
Color(0xffF6BE03),
],
start: Alignment.topCenter,
finish: Alignment.bottomCenter),
borderRadius: BorderRadius.round(7.0)),
baby: Container(
constraints:
const BoxConstraints(maxHeight: 40, maxWidth: 70),
alignment: Alignment.middle,
baby: const Icon(
Icons.arrow_forward_ios_rounded,
measurement: 22,
),
),
),
onPressed: () {
_bottomsheet(context);
},
),
),
],
),
],
),
);
}
void _bottomsheet(context) {
closing FilterProvider filterProvider =
Supplier.of<FilterProvider>(context, pay attention: false);
closing _type = sort;
showModalBottomSheet(
context: context,
isDismissible: true,
backgroundColor: Colours.clear,
builder: (context) => Container(
peak: MediaQuery.of(context).measurement.peak * 0.60,
ornament: const BoxDecoration(
gradient: LinearGradient(
colours: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
start: Alignment.topLeft,
finish: Alignment.bottomRight),
borderRadius: BorderRadius.solely(
topLeft: Radius.round(22.0),
topRight: Radius.round(22.0),
),
),
baby: Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 20, 12),
baby: Column(
kids: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: const TextStyle(
color: Color(0xffF6BE03),
fontFamily: 'Avenir',
fontWeight: FontWeight.w600,
fontSize: 24.0,
),
),
// IconButton(
// onPressed: () {
// Navigator.pop(context);
// },
// icon: const Icon(Icons.arrow_downward),
// iconSize: 30,
// ),
],
),
),
if (sort == 'physique' || sort == 'drive' || sort == 'model')
CheckboxWidget(
merchandise: merchandise,
sort: sort,
state: filterProvider.filter,
)
else if (sort == 'seats')
CupertinoMultiPicker(
state: filterProvider.filter['seats'],
)
else
CupertinoPickerWidget(
merchandise: merchandise,
sort: sort,
)
],
),
),
),
).whenComplete(() => filterProvider.apply = true);
}
}
[ad_2]
