Develop Reference

how to achieve gridview horizontally scrolling (carousell) for List<Widget> function in flutter?

I have a list of menu and it's overpopulate inside one page because the list of menu is more than expected, I want to change this listview into gridview with horizontally scrolling or carousell swipe, so other menu (card) will be shown when I swipe it to left, previously I use List<Widget> function and ListView() to create a list of card. I want three stack of horizontal card and when I swipe it to the left, it will showing other three stack horizontal card, just like this:
this is my previous code:
Padding(
padding: const EdgeInsetsDirectional.all(Dimensions.paddingSizeDefault),
child: Obx(() => ListView(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
addSemanticIndexes: false,
children: buildMainMenu(),
)));
buildMainMenu() is the name of List<Widget> function

To create a swipeable stack widget use flutter_card_swiper package (https://pub.dev/packages/flutter_card_swiper).
There are plenty of swipeable packages : -
https://pub.dev/packages?q=swipe+card
Sample Code : -
class Example extends StatelessWidget {
List<Container> cards = [
Container(
alignment: Alignment.center,
child: const Text('1'),
color: Colors.blue,
),
2nd Widget,
3nd Widget,
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Flexible(
child: CardSwiper(
cards: cards,
),
),
);
}
}
Complete Code : -
import 'package:flutter/material.dart';
import 'package:appinio_swiper/appinio_swiper.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(const Example());
class Example extends StatefulWidget {
const Example({super.key});
#override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
List<Container> cards = [
Container(
alignment: Alignment.center,
color: CupertinoColors.activeBlue,
child: const Text('1'),
),
Container(
alignment: Alignment.center,
color: CupertinoColors.activeGreen,
child: const Text('2'),
),
Container(
alignment: Alignment.center,
color: CupertinoColors.activeOrange,
child: const Text('3'),
),
Container(
alignment: Alignment.center,
color: CupertinoColors.systemPink,
child: const Text('4'),
)
];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CupertinoPageScaffold(
child: Center(
child: SizedBox(
height: 500,
width: 400,
child: AppinioSwiper(
allowUnswipe: false,
maxAngle: 2,
direction: AppinioSwiperDirection.left,
cards: cards,
),
),
),
),
),
);
}
}
Output : -

How to make dart flutter popup box?

I have an application like this:
My aim is that when I press the eye icon next to the text "Hello", I want a box to open just below the text and write the German version of "Hello". So it will say "Hallo".
My purpose is to show the meaning of the word.
When I press the eye, I want to show the German of the word. How can I make a white box under the word Hello, that is, the box in which the German language will be written?
Codes:
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class selamlasmaLearn extends StatelessWidget {
List <wordAndMeaning> wordsList = [wordAndMeaning("Hello", "Hallo"), wordAndMeaning("Go", "Gehen")];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Builder(
builder: (context) {
final double height = MediaQuery.of(context).size.height;
return CarouselSlider(
options: CarouselOptions(
height: height,
viewportFraction: 1.0,
enlargeCenterPage: false,
),
items: wordsList.map((wordAndMeaning word) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Colors.amber),
child: Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
word.word,
style: TextStyle(fontSize: 45, color: Colors.white),
),
SizedBox(width: 10,),
Icon(Icons.remove_red_eye_sharp, color: Colors.white, size: 25,), // <<<<<<<<<
],
),
),
);
},
);
}).toList(),
);
}
),
);
}
}
class wordAndMeaning {
String word;
String meaning;
wordAndMeaning(this.word, this.meaning);
}
I keep the word and its German in a list called wordsList.
Thanks for the help in advance.

You can convert the widget to StatefulWidget or use a ValueNotifier to control the preserve/notify the state visibility.
You can use Visibility widget or just if to show and hide German text.
class selamlasmaLearn extends StatefulWidget {
#override
State<selamlasmaLearn> createState() => _selamlasmaLearnState();
}
class _selamlasmaLearnState extends State<selamlasmaLearn> {
bool _showGerman = false;
List<wordAndMeaning> wordsList = [
wordAndMeaning("Hello", "Hallo"),
wordAndMeaning("Go", "Gehen")
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Builder(builder: (context) {
final double height = MediaQuery.of(context).size.height;
return CarouselSlider(
options: CarouselOptions(
height: height,
viewportFraction: 1.0,
enlargeCenterPage: false,
),
items: wordsList.map((wordAndMeaning word) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Colors.amber),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(word.word,
style:
TextStyle(fontSize: 45, color: Colors.white)),
if (_showGerman) Text(word.meaning), //modify the way you want
],
),
const SizedBox(
width: 10,
),
IconButton(
icon: Icon(Icons.remove_red_eye_sharp),
color: Colors.white,
iconSize: 25,
onPressed: () {
setState(() {
_showGerman = !_showGerman;
});
},
),
],
),
);
},
);
}).toList(),
);
}),
);
}
}

Use the Tooltip widget
I'm emphasizing on the popup part in your question title. When using a Tooltip you ensure that your widgets do not shift position or jump when the Tooltip widget appear, as the example below illustrates.
Example code:
import 'package:flutter/material.dart';
class TooltipExample extends StatelessWidget {
const TooltipExample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Tooltip(
// Set the tooltip to trigger on a single tap, tapping outside the
// widget will make the tooltip disappear.
triggerMode: TooltipTriggerMode.tap,
// The message shown when the tooltip appears.
message: "Tooltip showing!",
// Consider adjusting this to your needs.
showDuration: const Duration(days: 1),
// The widget that must be clicked to show the tooltip.
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text("Hello"),
SizedBox(
width: 8,
),
Icon(Icons.visibility),
],
),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Cover me!"),
)
],
),
);
}
}
// Some code to run the above example, note the theme part that turns the
// tooltip white.
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
// Style the overall design of tooltips in the app in one place,
// or provide in each tooltip individually.
theme: ThemeData(
tooltipTheme: const TooltipThemeData(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(4),
),
),
textStyle: TextStyle(
backgroundColor: Colors.white,
color: Colors.black,
),
),
),
home: const Scaffold(
backgroundColor: Colors.amber,
body: TooltipExample(),
),
);
}
}
void main() => runApp(const App());
Here is how it looks:
Note that the Tooltip widget overlays whatever is below it. (instead of pushing it further down - like toggling the visibility of a normal widget in a row or column would have done)

How can I build a List in flutter with selectable items that allows me to switch screen

I'm new on Flutter so please don't go hard on me! I'm trying to understand how to build screens and navigate back and forth through them bringing values to other screens during navigation.
I wanna build this screen:
Inside lib, I created a models folder which contains the file cats.dart
enum Cat {
black,
white
}
extension CatExtension on Cat {
String get name {
switch (this) {
case Cat.black:
return 'Mr Black Cat';
case Cat.white:
return 'Ms White Cat';
default:
return null;
}
}
}
I thought it would be a good idea to separate the code creating two other folders inside lib which are
lib/screens
lib/widgets
so i created a select_item.dart inside screens and cats_items.dart inside widgets in order to import the widget where needed.
cats_items.dart
class CatsItemsListWidget extends StatelessWidget {
final cat = Cat.white; // I get null error if I don't do like that
#override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.fromLTRB(31, 24, 30, 88),
shadowColor: Color(0xFFEDEDEF),
shape: RoundedRectangleBorder(
side: new BorderSide(color: Color(0xFFEDEDEF)),
borderRadius: BorderRadius.circular(10.0)),
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
ListTile(
title: Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 4),
child: Text('Name:',
subtitle: Padding(
padding: EdgeInsets.fromLTRB(0, 4, 0, 16),
child: Text(
cat.displayValue,
)),
),
],
),
);
}
}
select_item.dart
class SelectItem extends StatelessWidget {
SelectItem();
#override
Widget build(BuildContext context) {
final appBarHeight = MediaQuery.of(context).size.height * 0.10;
return Scaffold(
appBar: AppBar(
toolbarHeight: appBarHeight,
automaticallyImplyLeading: false,
//title: ,
elevation: 0,
backgroundColor: Theme.of(context).backgroundColor,
),
body: SafeArea(
child: Stack(
children: [
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CatsItemsListWidget(),
],
),
),
],
),
),
);
}
}
main.dart
class CatsApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My cats app',
theme: ThemeData(
backgroundColor: PRIMARY_COLOR,
scaffoldBackgroundColor: PRIMARY_COLOR,
),
home: SelectItem(),
);
}
}
This is not working as expected as I get:
I can't understand how to create an item of the list for each element of enum Cat{} and also how to get clickable items in the list in order to switch screen on click. I also have to store a value corrisponding to what the user click, for example if user click on "Ms White Cat" I have to store a value that can be "MWC" and bring this value with me in the other screen.
Is the logic that I'm building correct? If not, why? How can I achieve what I need?

You need to use onTap and Navigator
like:
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => OtherScreen(),
),
);
},
Take a look at the example here

User input number dialog box in flutter

I'm a new flutter user. I'm trying to make a shopping list app. Basically the first page contains 3 clickable images. These images are the logos of the three stores we currently shop at for our supplies. When you click on the image, it takes you to another page that has a grid view of all of the items (pictures of the items) that we purchase from that store. My end goal is that when you click on the picture of the item, a dialog box pops up asking how many of this item you would like to put on the list, then put it on the list. I've gotten as far as creating a grid view of the items, and making the first image clickable, but I'm not sure how to make the input dialog box. Any help would be greatly appreciated.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(title: 'Shopping List');
}
}
class FirstRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Pick a store to start your list"),
),
body: Column(
children: [
Center(
child: Container(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150, maxWidth: 150),
child: Ink.image(
image: AssetImage('images/aldi.jpg'),
fit: BoxFit.fitWidth,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondRoute()),
);
},
),
),
),
),
),
Expanded(
child: Container(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150, maxWidth: 150),
child: Ink.image(
image: AssetImage('images/rd.png'),
fit: BoxFit.fitWidth,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdRoute()),
);
},
),
),
),
),
),
Expanded(
child: Container(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150, maxWidth: 150),
child: Ink.image(
image: AssetImage('images/sams.jpg'),
fit: BoxFit.fitWidth,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FourthRoute()),
);
},
),
),
),
),
),
],
),
),
);
}
}
class SecondRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Aldi's"),
),
body: Container(
padding: EdgeInsets.all(8.0),
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
children: <Widget>[
FlatButton(onPressed: (),
child: Image.asset('images/2milk.jpg'),
),
Image.asset('images/skimMilk.jpg'),
Image.asset('images/almondMilk.jpg'),
Image.asset('images/coconutMilk.jpg'),
Image.asset('images/soyMilk.jpg'),
Image.asset('images/halfAndHalf.jpg'),
Image.asset('images/heavyCream.jpg'),
Image.asset('images/whipCream.jpg'),
],
),
),
),
);
}
}
class ThirdRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Restraurant Depot"),
),
body: Center(),
);
}
}
class FourthRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sam's Club"),
),
body: Center(),
);
}
}

To make a dialog box, there are many widgets you can use.
I think the best use case here is an AlertDialog with your widgets items like TextField on top.
Inside the onTap add this, you can leave the long decorations if you don't want a frame-less border, i just added them to make my TextField look neater. You can also leave the controller, if you do not plan using a TextEditingController.
onTap: () {
var alert = AlertDialog(
title: Text("How many items do you need?"),
content: TextField(
style: TextStyle(
decoration: TextDecoration.none),
maxLines: 1,
maxLengthEnforced: false,
autofocus: false,
enabled: true,
onSubmitted: (String text) {
int number_input = int.parse(text);
// Do something with your number like pass it to the next material page route
},
controller: _controller,
decoration: new InputDecoration(
errorStyle: TextStyle(color: Colors.redAccent),
border: new UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromRGBO(40, 40, 40, 1.0),),
borderRadius: BorderRadius.circular(10.0),),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromRGBO(40, 40, 40, 1.0),),
borderRadius: BorderRadius.circular(10.0),),
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromRGBO(40, 40, 40, 1.0),),
borderRadius: BorderRadius.circular(10.0),),
prefixIcon: new Icon(
Icons.playlist_add,
size: 18.0,),),),);
showDialog(
context: context,
builder: (context) {
return alert;
},);
},

Add You Trigger OnTap() on your image and then use this code to pop your Custom dialog by create your widget in Container
showDialog(
context: context,
builder: (_) => Container(
child: //add you custom widget here
));

Overlapping card effect in Flutter

How can I create an overlapping card effect in a SliverAppBar as shown in the figure:
I tried following this article of Medium but the problem is it uses Stack with
Stack{
...
overflow: Overflow.visible,
...
}
to implement this and in Stack, overflowing part of widgets don't take inputs thus making my TabBar half Dead.
What can I do to avoid this?

Full Code
import 'package:flutter/material.dart';
Future<void> main() async {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MenuList(),
);
}
}
class MenuList extends StatefulWidget {
#override
_MenuListState createState() => _MenuListState();
}
class _MenuListState extends State<MenuList> {
static const double _appBarBottomBtnPosition =
24.0; //change this value to position your button vertically
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text(
'Testing',
style: TextStyle(color: Colors.red),
),
),
SliverAppBar(
pinned: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
titlePadding: EdgeInsets.only(bottom: 25),
title: Text('Title'),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0.0),
child: Transform.translate(
offset: const Offset(0, _appBarBottomBtnPosition),
child: RaisedButton(
shape: StadiumBorder(),
child: Text("Click Here"),
onPressed: () {},
),
),
),
),
SliverPadding(
padding: EdgeInsets.only(top: _appBarBottomBtnPosition),
),
SliverFixedExtentList(
itemExtent: 50,
delegate: SliverChildBuilderDelegate(
(context, index){
Color color = Colors.red.withOpacity(1- (index%10)/10);
return Container(
color: color,
alignment: Alignment.center,
child: Text("Color: $color"),
);
}
),
),
],
),
);
}
}