Develop Reference

How can I change the text color inside the chat bubble?

While I am typing the message it encodes it into white but when I have sent it, it turns to black which is the same with the response that I have been receiving. Kindly help me how will i change it to white.
import 'package:dialog_flowtter/dialog_flowtter.dart';
import 'package:flutter/material.dart';
import 'Messages.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'QuickTropa',
theme: ThemeData(
primaryColor: Color(0XFFf7c59f),
),
home: Home(),
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
late DialogFlowtter dialogFlowtter;
final TextEditingController _controller = TextEditingController();
List<Map<String, dynamic>> messages = [];
#override
void initState() {
DialogFlowtter.fromFile().then((instance) => dialogFlowtter = instance);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('QuickTropa'),
backgroundColor: Color(0XFF087830),
),
body: Container(
child: Column(
children: [
Expanded(child:
MessagesScreen(
messages:
messages)),
Container(
padding: EdgeInsets.symmetric(
horizontal: 14,
vertical: 8
),
color: Color(0XFF087830),
child: Row(
children: [
Expanded(child:
TextField(
controller: _controller,
style: TextStyle(color: Colors.white),
)),
IconButton(
onPressed: () {
sendMessage(_controller.text);
_controller.clear();
},
color: Colors.white ,
icon: Icon(Icons.send))
],
),
)
],
),
),
);
}
sendMessage(String text) async {
if (text.isEmpty) {
print('Message is empty');
} else {
setState(() {
addMessage(Message(
text: DialogText(text: [text])), true);
});
DetectIntentResponse response = await dialogFlowtter.detectIntent(
queryInput: QueryInput(text: TextInput(text: text)));
if (response.message == null) return;
setState(() {
addMessage(response.message!);
});
}
}
addMessage(Message message, [bool isUserMessage = false]) {
messages.add({
'message': message,
'isUserMessage': isUserMessage
});
}
}
import 'package:dialog_flowtter/dialog_flowtter.dart';
import 'package:flutter/material.dart';
class MessagesScreen extends StatefulWidget {
final List messages;
const MessagesScreen({Key? key, required this.messages}) : super(key: key);
#override
State<MessagesScreen> createState() => _MessagesScreenState();
}
class _MessagesState extends State<MessagesScreen> {
#override
Widget build(BuildContext context) {
return const Placeholder();
}
}
class _MessagesScreenState extends State<MessagesScreen> {
#override
Widget build(BuildContext context) {
var w = MediaQuery.of(context).size.width;
return ListView.separated(
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: widget.messages[index]['isUserMessage']
? MainAxisAlignment.end
: MainAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 14, horizontal: 14),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(
20,
),
topRight: Radius.circular(20),
bottomRight: Radius.circular(
widget.messages[index]['isUserMessage'] ? 0 : 20),
topLeft: Radius.circular(
widget.messages[index]['isUserMessage'] ? 20 : 0),
),
color: widget.messages[index]['isUserMessage']
? Color(0XFF087830)
: Color(0XFF087830).withOpacity(0.8)),
constraints: BoxConstraints(maxWidth: w * 2 / 3),
child:
Text(widget.messages[index]['message'].text.text[0])),
],
),
);
},
separatorBuilder: (_, i) => Padding(padding: EdgeInsets.only(top: 10)),
itemCount: widget.messages.length);
}
}
I tried putting Color:Colors.white isnide the box decoration but of course it wouldn't let me. I can't think anymore where to put it.

Try this
Text(widget.messages[index]['message'].text.text[0],
style:TextStyle(color:Colors.white,)
)

How to make page transition when use bottomNavigationBar in flutter

I use a basic bottomNavigationBar and now it shows just page without any transition,i want to use page transition when tap different bottomNavigationBars item.

Use IndexedStack Widget
int _currentIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: IndexedStack(
index: _currentIndex,
children: const [
HomePage(),
SettingsPage(),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (int index) => setState(() => _currentIndex = index),
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}

use PageView or TabView
Check this article

List pages = [
HomeScreen(),
DiscoverScreen(),
Container(),
MessageScreen(),
ProfileScreen(),
];
Scaffold(
body: pages.elementAt(current!),
bottomNavigationBar: BottomNavigationBar(
currentIndex: widget.current!,
unselectedItemColor: Colors.black,
selectedItemColor: Colors.green,
showSelectedLabels: true,
showUnselectedLabels: true,
onTap: (val) {
setState(() {
current = val;
});

Bottom Nav Transition With Persisting Ui
import 'package:flutter/material.dart';
class BottomNavTransitionWithPersistingUi extends StatefulWidget {
const BottomNavTransitionWithPersistingUi({Key? key}) : super(key: key);
#override
State<BottomNavTransitionWithPersistingUi> createState() => _BottomNavTransitionWithPersistingUiState();
}
class _BottomNavTransitionWithPersistingUiState extends State<BottomNavTransitionWithPersistingUi> {
late PageController _pageController;
late List<Widget> _tabBody;
int _currentIndex = 0;
#override
void initState() {
super.initState();
_pageController = PageController(
initialPage: 0,
keepPage: true, // for ui state
);
_tabBody = [
const NavHomeView(key: PageStorageKey("NavHomeView")),
const NavMoreView(key: PageStorageKey("NavMoreView")),
];
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: _bottomNavigationBarItems,
body: PageView(
controller: _pageController,
onPageChanged: _onPageChanged,
children: _tabBody,
),
);
}
Widget get _bottomNavigationBarItems => BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.menu),
label: 'More',
),
],
currentIndex: _currentIndex,
selectedItemColor: Colors.red,
elevation: 0.1,
unselectedItemColor: Colors.grey,
enableFeedback: true,
onTap: _onNavBarTapped,
);
void _onNavBarTapped(int index) {
setState(() {
_currentIndex = index;
});
_pageController.animateToPage(
index,
duration: const Duration(milliseconds: 500),
curve: Curves.easeOut,
);
}
void _onPageChanged(int index) {
setState(() {
_currentIndex = index;
});
}
}
class NavHomeView extends StatelessWidget {
const NavHomeView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView(
children: [
Container(
height: 500,
color: Colors.purple,
),
Container(
height: 500,
color: Colors.blue,
),
Container(
height: 500,
color: Colors.grey,
),
],
);
}
}
class NavMoreView extends StatelessWidget {
const NavMoreView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView(
children: [
Container(
height: 500,
color: Colors.red,
),
Container(
height: 500,
color: Colors.green,
),
Container(
height: 500,
color: Colors.amber,
),
],
);
}
}

How can I create inner navigation in showModalBottomSheet?

In my app I am trying to implement Badoo-like sort/filter showBottomModalSheet feature. I managed to create 2 separate pages, which I can navigate back and forth. However, the problem I'm facing is the second page in showBottomModalSheet. Back button works fine until I try to touch outside of the modal, which takes back to the first page. Instead it should close modal.
User navigates to sort users modal, which shows the 1st page in showBottomModalSheet When user taps "Show gender" it navigates to the second page (the one with different genders). When back button is pressed it navigates to 1st screen until it closes modal completely. Touching outside of the modal also closes the modal
The best stackoverflow answer that I tried:
https://stackoverflow.com/questions/63602999/how-can-i-do-navigator-push-in-a-modal-bottom-sheet-only-not-the-parent-page/63603685#63603685
I also tried using modal_bottom_sheet package, but had no luck.
https://pub.dev/packages/modal_bottom_sheet/example
Most of my code behind showBottomModalSheet:
class Page1 extends StatefulWidget {
const Page1({
Key? key
}) : super(key: key);
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
int _currentView = 0;
late List<Widget> pages;
#override
void initState() {
pages = [
page1(),
page2(),
];
super.initState();
}
#override
Widget build(BuildContext context) {
print("LOG build _currentView ${_currentView}");
return pages[_currentView];
}
Widget page1() {
return WillPopScope(
onWillPop: () async {
return true;
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60))),
height: 400,
width: double.maxFinite,
child: Center(
child: Column(
children: [
Text("First page"),
ElevatedButton(
onPressed: () {
setState(() {
_currentView = 1;
print("LOG page1 _currentView ${_currentView}");
});
},
child: Text("tap to navigate to 2nd page"),
),
],
)),
));
}
Widget page2() {
return WillPopScope(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60))),
height: 400,
width: double.maxFinite,
child: Center(
child: InkWell(
onTap: () {
setState(() {
_currentView = 0;
print("LOG page2 _currentView ${_currentView}");
});
},
child: Text("tap to navigate to 1st screen"),
),
),
),
onWillPop: () async {
print("LOG currentView jot $_currentView");
if (_currentView == 0) {
return true;
}
setState(() {
_currentView = 0;
});
return false;
});
}
}

Solution 1
Use the standard DraggableScrollableSheet or a 3rd-party widget to do it, there are a bunch of them. Here are some from https://pub.dev/
awesome_select
backdrop_modal_route
bottom_sheet_expandable_bar
bottom_sheet
cupertino_modal_sheet
modal_bottom_sheet
just_bottom_sheet
sheet
Solution 2
Anyway, if you'd like to do it manually I'd do it with Navigator.push/Navigator.pop instead with PageRouteBuilder with barrierDismissible=true.
It would like the following. Check out the live demo on DartPad.
Here's the code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _show() async {
await Navigator.of(context).push(
PageRouteBuilder(
opaque: false,
barrierDismissible: true,
pageBuilder: (_, __, ___) => const Page1(),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _show,
tooltip: 'Settings',
child: const Icon(Icons.settings),
),
);
}
}
class Page1 extends StatefulWidget {
const Page1({Key? key}) : super(key: key);
#override
State<Page1> createState() => _Page1State();
}
class _Page1State extends State<Page1> {
#override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: const Offset(0, 3), // changes position of shadow
),
],
),
height: 400,
width: double.maxFinite,
child: Center(
child: Material(
type: MaterialType.transparency,
child: Column(
children: [
const Text("First page"),
ElevatedButton(
onPressed: () async {
final backButton =
await Navigator.of(context).push<bool?>(
PageRouteBuilder(
opaque: false,
barrierDismissible: true,
pageBuilder: (_, __, ___) => const Page2(),
),
);
if (backButton == null || backButton == false) {
if (mounted) Navigator.of(context).pop();
}
},
child: const Text("tap to navigate to 2nd page"),
),
],
),
),
),
),
),
],
);
}
}
class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60)),
),
height: 400,
width: double.maxFinite,
child: Center(
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () => Navigator.of(context).pop(true),
child: const Text("tap to navigate to 1st screen"),
),
),
),
),
);
}
}

How to Create a List of Categories using Containers

so i wanted to create a list of categories (Day-Week-Month) and i achieved it just fine using a
listView.builder but it isn't centered on the horizontal axis so i had the idea to do it with containers.
https://im3.ezgif.com/tmp/ezgif-3-aba2cbc290ae.gif
so using only containers as the gif shows when i press it stays active even if i press on another one
which is something i dont want obviously.
https://im3.ezgif.com/tmp/ezgif-3-e1e304256aaf.gif
my code :
class DWM extends StatefulWidget {
#override
_DWMState createState() => _DWMState();
}
class _DWMState extends State<DWM> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextDWM(
text: "Day",
),
TextDWM(
text: "Week",
),
TextDWM(
text: "Month",
),
],
),
);
}
}
class TextDWM extends StatefulWidget {
final String text;
bool isActive;
TextDWM({this.text,this.isActive = false});
#override
_TextDWMState createState() => _TextDWMState();
}
class _TextDWMState extends State<TextDWM> {
#override
Widget build(BuildContext context) {
return Column(
children: [
GestureDetector(
onTap: (){
setState(() {
widget.isActive = true;
});
},
child: Text(
widget.text,
style: TextStyle(
color: widget.isActive ? Colors.white : Colors.grey,
),
),
),
SizedBox(height: 5,),
Container(
height: 2,
width: 40,
color: widget.isActive ? Colors.deepOrange : Colors.transparent,
)
],
);
}
}

Please check out the code below to learn one of the ways this could be done. However it is advisable to use something like Inherited widget or Provider to pass data down the widget tree.
import 'package:flutter/material.dart';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
home: MyApp()));
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Demo"),
),
body: DWM(),
);
}
}
class DWM extends StatefulWidget {
#override
_DWMState createState() => _DWMState();
}
class _DWMState extends State<DWM> {
final List<String> _items = ["Day", "Week", "Month"];
List<bool> _active = []; //[true,false,false];
#override
void initState() {
super.initState();
_active = List.filled(_items.length, false);
}
void setActive(int active) {
setState(() {
_active = List.filled(_items.length, false);
_active[active] = true;
});
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(
_items.length,
(index) => TextDWM(
text: _items[index],
isActive: _active[index],
setActive: () => setActive(index),
),
),
),
);
}
}
class TextDWM extends StatelessWidget {
final String text;
final bool isActive;
final Function setActive;
const TextDWM({this.text, this.isActive, this.setActive});
#override
Widget build(BuildContext context) {
return Column(
children: [
GestureDetector(
onTap: () {
setActive();
},
child: Text(
text,
style: TextStyle(
color: isActive ? Colors.white : Colors.grey,
),
),
),
const SizedBox(
height: 5,
),
Container(
height: 2,
width: 40,
color: isActive ? Colors.deepOrange : Colors.transparent,
)
],
);
}
}

flutter - How to make delay to ListView, so item show one by one

I have a ListView that contains dynamic items, generated via StreamBuilder. Currently, these items show all at once like normal ListView. However, I want to make it so the items of the ListView show one by one with delay.
Is it even possible?
StreamBuilder(
stream: greetingBloc.list,
builder: (BuildContext context,AsyncSnapshot<List<Greeting>> snapshot){
if(snapshot.hasData){
return ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (ctx,i){
return Padding(
padding: EdgeInsets.all(8),
child: Container(
padding: EdgeInsets.all(16),
color: Colors.green,
child: Text(snapshot.data[i].description,
style: TextStyle(
color: Colors.white
),),
),
);
},
);
}else{
return GreetingShimmer();
}
},
),

Set default delay.
Think how to calculate delay for a item, if previous item hasn't appeared yet.
Use opacity widget.
I've made a simple example, how you can do it.
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.blue,
body: Test(),
),
);
}
}
class Test extends StatelessWidget {
DateTime lastRender;
get _duration {
var now = DateTime.now();
var defaultDelay = Duration(milliseconds: 100);
Duration delay;
if (lastRender == null) {
lastRender = now;
delay = defaultDelay;
} else {
var difference = now.difference(lastRender);
if (difference > defaultDelay) {
lastRender = now;
delay = defaultDelay;
} else {
var durationOffcet = difference - defaultDelay;
delay = defaultDelay + (-durationOffcet);
lastRender = now.add(-durationOffcet);
}
return delay;
}
return defaultDelay;
}
#override
Widget build(BuildContext context) {
return ListView(
children: List.generate(
100,
(index) => Item('item $index', _duration),
),
);
}
}
class Item extends StatefulWidget {
const Item(this.text, this.duration);
final Duration duration;
final String text;
#override
_ItemState createState() => _ItemState();
}
class _ItemState extends State<Item> with SingleTickerProviderStateMixin {
Animation<double> animation;
AnimationController animationController;
bool visible = false;
#override
void initState() {
super.initState();
animationController = AnimationController(
duration: widget.duration,
vsync: this,
);
animation = Tween(begin: 0.0, end: 1.0).animate(animationController);
animation.addStatusListener((status) {
setState(() {});
});
animationController.forward();
super.initState();
}
#override
void dispose(){
animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Opacity(
opacity: animation.value,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width: 4,
color: Colors.blueAccent,
),
),
height: 80,
child: Text(widget.text, style: TextStyle(fontSize: 20.0)),
),
);
}
}

I know it's too late but let me give you a simple solution. for this one use the animate_do package for the animation.
StreamBuilder(
stream: greetingBloc.list,
builder: (BuildContext context,AsyncSnapshot<List<Greeting>> snapshot){
if(snapshot.hasData){
return ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (ctx,i){
return Padding(
padding: EdgeInsets.all(8),
child: FadeIn(
delay: Duration(milliseconds: (1500 + (150 * (i + 1)))),
Container(
padding: EdgeInsets.all(16),
color: Colors.green,
child: Text(snapshot.data[i].description,
style: TextStyle(
color: Colors.white
),),
)),
);
},
);
}else{
return GreetingShimmer();
}
},
),
customize it to your likings.

Inside the listview widget
instead of doing:
return Padding(
padding: EdgeInsets.all(8),
child: Container(
padding: EdgeInsets.all(16),
color: Colors.green,
child: Text(snapshot.data[i].description,
style: TextStyle(
color: Colors.white
),),
),
);
You can do this:
return Future.delayed(const Duration(milliseconds: 500), () => Padding(
padding: EdgeInsets.all(8),
child: Container(
padding: EdgeInsets.all(16),
color: Colors.green,
child: Text(snapshot.data[i].description,
style: TextStyle(
color: Colors.white
),),
),
);
);