I want to see the bottom textfield in chat screen when keyboard is active
my structure:
Column(
children: [
ListView.builder(
itemCount: controller.messages.length,
itemBuilder: (BuildContext context, int index) {
final item = controller.messages[index];
return Message(
msg: item.message.toString(),
direction: index % 2 == 0 ? 'left' : 'right',
);
},
),
Row(
children: [
Icon(Icons.add),
TextInput(
controller: controller.textController,
hint: 'Write Here',
border: const OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(35))),
),
IconButton(
onPressed: () => controller.sendMessage(),
icon: Icon(Icons.send, color: kPrimaryColor),
)
],
),
],
),
ScreenUtilInit(
designSize: Size(375, 867),
minTextAdapt: true,
rebuildFactor: RebuildFactors.all,
builder: (BuildContext context, Widget? child) => MaterialApp(
debugShowCheckedModeBanner: false,
title: 'title',
),
);
if you are using latest version of ScreenUtilInit then make sure ScreenUtilInit is parent of your MaterialApp
ScreenUtilInit(
designSize: Size(yourWidth, yourHeight),
builder: (BuildContext context, Widget? child){
return MaterialApp()
},
);
Related
I am working on a statefulWidget and my purpose is to make sure that the next button is not clickable until an option (in this language is selected). However it doesn't seem to work, I also added Yaesin's(Someone who answered) answer to the code
ListView.builder(
itemCount: histoires.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(
histoires[index].title,
style: TextStyle(color: Colors.pink),
),
trailing: IconButton(
icon: Icon(Icons.play_arrow),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setState) =>
AlertDialog(
content: Column(children: [
InkWell(
onTap: () {
_handleTap;
},
child: ListTile(
trailing: Icon(Icons
.flag_circle_rounded),
title: Text(
"French",
style: TextStyle(
color: Colors
.blueGrey),
))),
_active
? InkWell(
onTap: () {},
child: Image.asset(
"assets/nextactive.png",
height: height * 0.2,
width: width * 0.4),
)
: Image.asset(
"assets/nextinactive.png",
height: height * 0,
width: width * 0)
]),
));
});
}));
}),
To update dialog UI, you can use StatefulBuilder's setState
return StatefulBuilder(
builder: (context, setState) =>
AlertDialog(
content: Column(children: [
While using separate method, pass the StatefulBuilder's setState to the function. For your case, it will be
onPressed: () async {
await showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setStateSB) => AlertDialog(
content: Column(children: [
InkWell(
onTap: () {
_handleTap(setStateSB);
},
child: ListTile(
Also make sure to receive this setStateSB(renamed to avoid confusion with state's setState).
_handleTap(setStateSB){ ....
More about using StatefulBuilder
Since your in a Dialog, for setState to work, you need to wrap it with a StatefulBuilder.
You haven't included your full code, so I'm using this example taken from the docs:
await showDialog<void>(
context: context,
builder: (BuildContext context) {
int? selectedRadio = 0;
return AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Column(
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int? value) {
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);
},
);
See also
A YouTube video by the Flutter team explaining StatefulBuilder
I have noticed if maxChildSize and minChildSize has the same value then swiping up on the contents of DraggableScrollableSheet closes the bottom sheet.
The expected behaviour is to scroll down the ListView provided in the builder argument of the DraggableScrollableSheet.
I believe the expected behaviour should be followed even when both maxChildSize and minChildSize are the same.
Am I missing something?
Here is the minimum reproducible code:
import 'package:flutter/material.dart';
class DraggableBottomSheetTest extends StatelessWidget {
const DraggableBottomSheetTest({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return DraggableScrollableSheet(
maxChildSize: 0.5,
minChildSize: 0.5,
initialChildSize: 0.5,
expand: false,
builder: (context, controller) => ListView.builder(
controller: controller,
itemCount: 50,
itemBuilder: (context, index) => ListTile(
title: Text('Item $index'),
),
),
);
},
);
},
child: Text('Show Modal BottomSheet'),
),
),
);
}
}
import 'package:flutter/material.dart';
class DraggableBottomSheetTest extends StatelessWidget {
const DraggableBottomSheetTest({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true, // set this to true
builder: (context) {
return DraggableScrollableSheet(
maxChildSize: 0.5,
minChildSize: 0.5,
initialChildSize: 0.5,
expand: false,
builder: (context, controller) => ListView.builder(
controller: controller,
itemCount: 50,
itemBuilder: (context, index) => ListTile(
title: Text('Item $index'),
),
),
);
},
);
},
child: Text('Show Modal BottomSheet'),
),
),
);
}
}
I have a listitem on RefreshIndicator and each of the items have a navigator.pushNamed which redirect a new page.
I need reload RefreshIndicator when i run Navigator.pop(context) in the new page.
//Home
RefreshIndicator(
onRefresh: _con.refreshHome,
child: ListView.separated(
itemBuilder: (context, index) => SizedBox(
width: size.width * 0.8,
child: OrdenWidget(
orden: currentData[index],
mostrarComenzar: true,
onTap: currentData[index].aceptada ==
true
? () {
Navigator.PushNamed(
context,
"/New Page",
arguments: currentData[index],
).then((_) {
_con.refreshHome();
});
}
: null,
),
),
separatorBuilder: (context, index) => const Divider(
color: Colors.white,
),
itemCount: currentData.length,
),
),
//Second Screen
TextButton(onPressed:(){ Navigator.pop(context);}, child: const Text("Go Back"),),
try with Navigator.push
Navigator.push(
context,
MaterialPageRoute<void>(builder: (_) => NewPage()),
).then((_){
_con.refreshHome();
});
I have wrapped ListView.builder inside Visible widget, and the button for its visible property is in a ListTile widget with variable _currencyVisible.
The widget Visible works 2 times i.e. false/hidden(default), then changes to visible when clicked, and again hides on the second click, but it doesn't work after that. Printing on console _currencyVisible shows correct data.
Here's my code:
menuItems(BuildContext context) {
bool _currencyVisible = false;
return StatefulBuilder(
builder: (BuildContext context, void Function(void Function()) setState) {
return ListView(
children: [
ListTile(
title: FutureBuilder<dynamic>(
future: getUserCurrencySymbol(),
builder:(BuildContext context, AsyncSnapshot<dynamic> snapshot) {
return Text("Currency " + snapshot.data.toString());
}),
trailing: IconButton(
icon: Icon(Icons.refresh),
onPressed: () { setState(() { _currencyVisible = !_currencyVisible; }); },
),
),
Visibility(
visible: _currencyVisible,
child: ListView.builder(
shrinkWrap: true,
itemCount:
currency.allCurrenciesList.length,
itemBuilder: (context, index) {
for (Currency c in currency.allCurrenciesList) {
currency.allCurrenciesList.removeAt(0);
return Card(
child: ListTile(
title: Text(c.country),
subtitle: Text(c.shortCurrency),
trailing: Text(c.symbol),
onTap: () {
saveUserCurrency(c.country, context);
},
),
);
}
return Text("Not Null");
},
),
),
],
);
},
);
}
You are removing all of the data from your currency list. The widget is showing correctly, but there is no data to display.
Remove this line
currency.allCurrenciesList.removeAt(0);
Don't loop through the currencies in itemBuilder. Use index instead.
Visibility(
visible: _currencyVisible,
child: ListView.builder(
shrinkWrap: true,
itemCount: currency.allCurrenciesList.length,
itemBuilder: (context, index) {
final c = currency.allCurrenciesList[index];
return Card(
child: ListTile(
title: Text(.country),
subtitle: Text(c.shortCurrency),
trailing: Text(c.symbol),
onTap: () {
saveUserCurrency(c.country, context);
},
);
}
return Text("Not Null");
),
),
I would like to have my gridview to take the whole screen, but i can't find a way to do this.
I already check multiple blog like :
https://medium.com/nusanet/flutter-gridview-bad48c1f216c
But this doesn't seem to work in my case.
Even when i'm using MediaQuery Data to get the screen width and height to adapt the childAspectRation.
Here my gridview :
GridView.count(
childAspectRatio: (widthScreen / heightScreen),
shrinkWrap: true,
crossAxisCount: 2,
physics: NeverScrollableScrollPhysics(),
crossAxisSpacing: 15,
mainAxisSpacing: 10,
padding: const EdgeInsets.all(5),
children: <Widget>[
CardItem(
imageUrl: 'assets/images/apprendreajouer.jpg',
title: 'Apprendre à jouer',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Cours",
pageKey: 1,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/exercices.jpeg',
title: 'Exercice',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Exercices",
pageKey: 2,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/partition.jpg',
title: 'Partition',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Partition",
pageKey: 3,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/dictionnaire.jpeg',
title: 'Mon dictionnaire',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Dictionnaire d'accords",
pageKey: 4,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/examen.jpeg',
title: 'Examen',
),
CardItem(
imageUrl: 'assets/images/apropos.jpg',
title: 'A propos',
),
],
),
Here below an image of what i want :
Update of what i get using #Thierry source code :
Any help would be great.
You have some discrepancies in your code.
You cannot define:
6 children for your GridView
childAspectRatio of widthScreen / heightScreen
crossAxisCount: 2
You can keep your childAspectRatio and crossAxisCount if you reduce the number of children to 4.
If you want 6 children on 3 Rows, then change the childAspectRatio to MediaQuery.of(context).size.aspectRatio * 3 / 2.
If you want 6 children on 2 Rows, then increase crossAxisCount to 3, and change the childAspectRatio to MediaQuery.of(context).size.aspectRatio * 2 / 3.
Note: You can continue like that. if you want m Rows of n children, the childAspectRatio should be m/n.
Full source code (6 children on 3 Rows)
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('GridView Demo')),
body: LayoutBuilder(
builder: (context, constraints) => GridView.count(
childAspectRatio: constraints.biggest.aspectRatio * 3 / 2,
shrinkWrap: true,
crossAxisCount: 2,
physics: NeverScrollableScrollPhysics(),
children: List.generate(
6,
(index) => Padding(
padding: const EdgeInsets.all(4.0),
child: CardItem(
imageUrl: 'assets/images/abstract$index.jpg',
title: 'Abstract $index',
),
),
).toList(),
),
),
);
}
}
class CardItem extends StatelessWidget {
final String imageUrl;
final String title;
final VoidCallback function;
const CardItem({Key key, this.imageUrl, this.title, this.function})
: super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: function,
child: Card(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(imageUrl),
fit: BoxFit.cover,
alignment: Alignment.topCenter,
),
),
child: Text(title),
),
),
);
}
}