Fixed buttons between AppBar and SingleChildScrollView (Flutter) - flutter

I would like to include buttons between AppBar and ListView. In the example below, the buttons scroll along with the text. I tried to include the SingleChildScrollView within a Column, but was unsuccessful.
I read that the Column widget does not support scrolling. I already searched a lot, but I didn't find an example similar to what I need.
Can someone help me?
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('A Idade do Lobo'),
elevation: 0.0,
backgroundColor: COLOR_MAIN,
),
body: NotificationListener(
onNotification: (notif) {
if (_hasScroll) {
if (notif is ScrollEndNotification && scrollOn) {
Timer(Duration(seconds: 1), () {
_scroll();
setState(() {
_controlButton();
});
});
}
}
return true;
},
child: SingleChildScrollView(
controller: _scrollController,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Center(
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
onPressed: _showScrollPickerDialog,
child: Text('Rolagem ${_scrollSpeed}'),
),
new RaisedButton(
onPressed: _showTomPickerDialog,
child: Text('TOM ${_tom}'),
),
],
),
),
new Flexible(
fit: FlexFit.loose,
child: new ListView.builder(
shrinkWrap: true,
itemCount: _songDetails.length,
itemBuilder: (context, index) {
return new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: new EdgeInsets.all(5.0),
child: new RichText(
text: TextSpan(children: [
new TextSpan(
text: '${_songDetails[index].line}',
style: _getStyle(
_songDetails[index].type,
),
),
]),
),
),
],
);
},
),
),
],
),
),
),
floatingActionButton: _controlButton(),
);
}
}

You can use bottom properly of AppBar to achieve desire UI.
Following example clear your idea.
import 'package:flutter/material.dart';
class DeleteWidget extends StatefulWidget {
const DeleteWidget({Key key}) : super(key: key);
#override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("your title"),
bottom: PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width, 40),
child: Center(
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
onPressed: () {},
child: Text('Rolagem '),
),
new RaisedButton(
onPressed: () {},
child: Text('TOM '),
),
],
),
),
),
),
body: Container(
child: ListView.builder(
itemBuilder: (context, int index) {
return Text(index.toString());
},
itemCount: 100,
),
));
}
}

Related

How to open google maps by clicking on a button in flutter

I am new to flutter and I want to open google maps by clicking on button using flutter.
Here is my code and in that code on line no 98 I want to open google maps by clicking on share your location button so please give me a suggestion that which dependencies I should use to do so (google-maps-flutter or google-urls) and what changes I should make in my code.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'maps.dart';
class Intro extends StatefulWidget {
const Intro({Key? key}) : super(key: key);
#override
_IntroState createState() => _IntroState();
}
class _IntroState extends State<Intro> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('\t\t\t\t\t\t\t\t\t\tShree Food'),backgroundColor: Color(0xff01A0C7)),
body: Column(
children:[
Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text('Goal'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
child: const Text('>'),
onPressed: () {
showAlertDialog(context);
},
),
const SizedBox(width: 8),
],
),
],
),
),
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text('Vision'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
child: const Text('>'),
onPressed: () {
showAlertDialog1(context);
},
),
const SizedBox(width: 8),
],
),
],
),
),
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
GridView.count(
primary: false,
padding: EdgeInsets.all(50),
shrinkWrap: true,
crossAxisCount: 2,
children: [
Column(
children : [
IconButton(
icon: Image.asset(
'images/maps.png',
),
iconSize: 80,
onPressed: () {
**//I want to open google maps by clicking on this button**
},
),
Text('Share Your Location')
],
),
Column(
children : [
IconButton(
icon: Image.asset(
'images/donate.jpg',
),
iconSize: 80,
onPressed: () {
},
),
Text('Donate Zone')
],
),
],
),
],
),
)
]
)
);
}
}
showAlertDialog(BuildContext context) {
// Create button
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(MaterialPageRoute(builder: (context) => Intro()));
},
);
// Create AlertDialog
AlertDialog alert = AlertDialog(
title: Text("Simple Alert"),
content: Text("This is an alert message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
showAlertDialog1(BuildContext context) {
// Create button
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(MaterialPageRoute(builder: (context) => Intro()));
},
);
// Create AlertDialog
AlertDialog alert = AlertDialog(
title: Text("Simple Alert"),
content: Text("This is an alert message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
if I understood your question , you want to open google maps when pressing on a button , if this is the case you need to use this package :
map_launcher
give it a try

Scroll single ListTile in ListView

Scroll single ListTile in ListView
class MainScreen extends MvcScreen<MainScreenController> {
#override
MainScreenController initController() => MainScreenController();
#override
Widget defaultScreenLayout(
ScreenParameters screenParameters, MainScreenController controller) {
return _tabsLayout;
}
Widget get _tabsLayout => DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text(AppScaffold().title),
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () {}),
],
),
drawer: TelegramDrawer(),
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xff65a9e0),
child: Icon(Icons.create),
onPressed: () {},
),
body: _body,
),
);
Widget get _body => Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: _chatsListView),
],
).paddingAll(0);
Widget get _chatsListView => Container(
child:
ListView.builder(itemCount: 1, itemBuilder: channelListItemBuilder),
);
Widget channelListItemBuilder(context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueGrey[200],
foregroundColor: Colors.white,
radius: 28,
child: Icon(
Icons.archive,
size: 30,
),
),
title: Text(
"Archived Chats",
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
),
);
}
Once you wrap ListView in the column it does not allow you to scroll view. Therefore here I've changed the code:
Widget get _body => Expanded(child:Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: _chatsListView),
],
).paddingAll(0));

how to list dynamically radiobuttons contained in listTiles in flutter?

i would like to show a list of radiobuttons? this radiobuttons are contained in ListTile widget, i tried some code but nothing appears :
when i put a single radiobutton , this appears but when i put a listview nothing appears on the page including others widgets
Widget build(BuildContext context) {
return StoreConnector<MMpataState, MMpataViewModel>(
converter: MMpataViewModel.convertStateToViewModel,
builder: (BuildContext context, MMpataViewModel vm) {
// print(vm.state.subscriptions2);
if (vm.state.isSubscriptions2loaded &&
vm.state.subscriptions2.length < 1) {
return Scaffold(
appBar: AppBar(
title: Text("Aucune donnée"),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text(
"Nous n'avons trouvé aucune souscription pour le produit
sélectionné.",
),
),
),
);
}
return Scaffold(
appBar: AppBar(
title: Text(!vm.state.isSubscriptions2loaded ? "Chargement ... " :
vm.state.subscriptions2[0].product.libelle),
),
body: MMpataLoader(
inAsyncCall: _isLoading || !vm.state.isSubscriptions2loaded,
child:
Column(
children: <Widget>[
Form(
child: new Container(
color: Color(0xffFFFFFF),
child:
Column( crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget> [
Padding(padding:EdgeInsets.fromLTRB(25.0, 0.0,
0.0, 0.0),
child: Column(crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget> [
Text(""),
Text(vm.state.subscriptions2[0].product.libelle,
textAlign:TextAlign.left,style:TextStyle()),
Text(vm.state.subscriptions2[0].product.description,
textAlign: TextAlign.left),
Expanded(
child: ListView.builder(shrinkWrap:true,
itemCount: vm.state.subscriptions2.length,
itemBuilder: (context, index) {
return RadioListTile<double>(
title:Text(
"${vm.state.subscriptions2[index].quota.libelle}
(${vm.state.subscriptions2[index].amount} CDF)"),
value: vm.state.subscriptions2[index].amount,
groupValue:vm.state.subscriptions2[index].amount,
onChanged: (double value) {
setState(() {
vm.state.subscriptions2[index].amount = value;
});
},
);
}),
),
])
),
_getActionButtons(vm),
SizedBox(height: 100)
]) ],
),
),
)
],
),
),
);
},
);
}
i have this error while running : RenderBox was not laid out

How to add a grid to Cupertino Segmented Control in Flutter

I was referring to this link on Git Hub and I'm trying to add a grid to the segment.
My objective is to add images in a grid view to a segment in Cupertino Segmented Control
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text("awrdfsfsdfs"),
automaticallyImplyLeading: true,
transitionBetweenRoutes: true,
previousPageTitle: AppLocalizations.of(context).tr('alerts.back'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
padding: EdgeInsets.only(top: 20),
children: <Widget>[
CupertinoSegmentedControl(
children: {
0: Text(AppLocalizations.of(context).tr('titles.secImg')),
1: Text(AppLocalizations.of(context).tr('titles.secQuest')),
},
groupValue: _selectedIndexValue,
onValueChanged: (value) {
setState(() => _selectedIndexValue = value);
},
),
_selectedIndexValue == 0 ? IosFirstPage() : IosSecondPage()
],
),
)
],
),
);
}
}
class IosFirstPage extends StatelessWidget {
const IosFirstPage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
var imgList = [ ];
return Flex(
direction: Axis.vertical,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 10,left: 10),
child: Row(
children: <Widget>[
Text(AppLocalizations.of(context).tr('titles.selectSecImg'),style: textTheme.subtitle,textAlign: TextAlign.left,textScaleFactor: 1.2,),
],
)
),
Container(
width: MediaQuery
.of(context)
.size
.width,
height: MediaQuery.of(context).size.height*0.64, //adjust this resize the scroll view of the images
margin: EdgeInsets.only(top: 10,left: 10,right: 10),
color: Colors.white30,
child: GridView.builder(
itemCount: imgList.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5),
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
child: new Card(
elevation: 1.0,
child: new Container(
alignment: Alignment.center,
margin: new EdgeInsets.only(
top: 10.0, bottom: 10.0),
child: new Image.asset(imgList[index], scale: 0.5,)
),
),
onTap: () {
print(index);
/*showDialog(
barrierDismissible: false,
context: context,
child: new CupertinoAlertDialog(
title: new Column(
children: <Widget>[
new Text("GridView"),
new Icon(
Icons.favorite,
color: Colors.red,
),
],
),
content: new Text( imgList[index]),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text("OK"))
],
));*/
},
);
},
),
),
],
);
}
}
class IosSecondPage extends StatelessWidget {
const IosSecondPage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container();.
}
}

Listview not showing inside a Row in Flutter

I am trying to show a listview after some texts in a column. The text shows properly inside the first Row until I add a listview inside the next row. Everything disappears after adding the ListView.
Here is the Code:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
"Prayer Time",
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.normal),
),
],
),
Row(
children: <Widget>[myList()],
),
],
),
),
floatingActionButton: FloatingActionButton(
tooltip: 'Add Alarm',
child: Icon(Icons.add),
backgroundColor: const Color(0xff0A74C5),
),
);
}
Expanded myList() {
return Expanded(
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
)
);
}
}
change like this:
Expanded(
child: Row(
children: <Widget>[myList()],
),
),
Your ListView should have a fixed Size. Try to wrap the ListView inside a Container.
I run your code and fixed it. Replace your myList() with this code bellow:
Expanded myList() {
return Expanded(
child: Container(
width: double.infinity,
height: 200,
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
),
)
);
}