I have a Row of ListTiles which have Slidable as their children. I need to open the Slidable from an action in the AppBar (similar to how editing works in apple music). Since this happens outside of the Slidable widget, I cannot get the SlidableState from Slidable.of(context). Is there a way to do that, or perhaps a similar widget that does the job easier?
Example:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('Title'),
actions: [
<EditButton()>, #has to open the slidable
],
),
body: Column(
children: [
Slidable: (
child: ListTile(tile: Text('text'),
actionPane: SlidableScrollActionPane(),
actions: [
IconButton(onPressed: () {delete()}, icon: Icon(Icons.delete)),
],
),
],
),
}
Related
How can I open SpeedDial in a horizontal way in my project like this?
If there are other libraries, that is fine.
You can also create your own custom floating action button. But since you are open to packages too writing an answer in which you can achieve it using a package
Try https://pub.dev/packages/custom_floating_action_button
Add this to pubspec.yaml
custom_floating_action_button: ^0.0.3
You can wrap the scaffold with CustomFloatingActionButton
//add custom floating action button on top of your scaffold
//minimum 2 and maximum 5 items allowed
#override
Widget build(BuildContext context) {
return CustomFloatingActionButton(
body: Scaffold(
appBar: AppBar(
title: const Text('appbar title'),
),
body: Container(),
),
options: const [
CircleAvatar(
child: Icon(Icons.height),
),
CircleAvatar(
child: Icon(Icons.title),
),
//All widgets that should appear ontap of FAB.
],
type: CustomFloatingActionButtonType.horizontal,
openFloatingActionButton: const Icon(Icons.add),
closeFloatingActionButton: const Icon(Icons.close),
);
}
I am using flutter 3.0.0
In my application I am displaying a native video using platform view.
The video is displaying but it is always displaying on upper left corner and it covers other
widgets even they are in a stack.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Stack(
children: [
Center(
child: ConstrainedBox(
constraints:
const BoxConstraints.expand(height: 200, width: 200),
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child:
const AndroidView(viewType: 'remote-video'),
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
MethodChannels.coreMethodChannel
.invokeMethod("load");
},
child: const Text('Invoke'),
),
),
],
),
],
),
);
}
This is how it looks when I run the code
As you can see it is displaying over everything.
Can you provide some advice on how to fix this?
As of 31/07/2022 this seems to be a bug in flutter >= 3.0.0. Following the solution in this question Flutter AndroidView Widget I downgraded to 2.10.5 and then it worked as expected. Hopefully the flutter team will resolve it shortly.
Hi There I am working on a app where i need to use two sections in appbar one upper
1->section with logo and some Icons
2-> Search input field below the Title Section.
UI images are attached for better understanding.
you can customize the size of app bar by using toolbarHeight: 120.0 // set value
then use flexibleSpace to add column or rows
it will look something like this
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
toolbarHeight: 120.10, //set your height
flexibleSpace: SafeArea(
child: Container(
color: Colors.blue, // set your color
child: Column(
children: [
Row(
children: [Text("Logo")],
),
Text("data"), // set an icon or image
IconButton(
icon: Icon(Icons.search),
onPressed: () {}) // set your search bar setting
],
),
),
),
),
),
);
}
}
Just simply create your AppBar as intended, in your screenshot, you don't actually need a second Row. A TextFormField will be enough (you will actually need to customise the InputDecoration as well):
return AppBar(
title: Column(children: [
Row(children: [
Icon(Icons.menu),
Text('First row'),
const Spacer(),
Icon(Icons.person),
]),
TextFormField(),
]),
);
You can use the bottom property from the AppBar widget.
AppBar(
title: YourFirstRowWidget(),
centerTitle: true,
bottom: PreferredSize(
child: YourSearchBarWidget(),
preferredSize: null),
)
But you may want to create your own AppBar widget for a perfect result.
I have used SilverAppBar but don't know how to add a drawer to it. I just want an app bar with a drawer that hides on scrolling
Note that the Scaffold takes care of all of the major behavior associated with Material design.
If you add the drawer field to your Scaffold, it will automatically add a hamburger menu icon to the left hand side of your SilverAppBar in flutter.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Drawer - Sliver AppBar'),
)],
),
drawer: Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
child: Text(' I am Drawer'),
curve: SawTooth(12),
),
],
),
),
);
}
I'm new to flutter and am trying to stack a searchView on top of a ListView. I would Look something like this:
I don't know how to achieve this layout on flutter, i tried using a column(which crashes the app), used the a stack (which overlaps the widgets) and i finally tried to add a search widget a the first item of the ListView but that didn't result am looking for.
Widget build(BuildContext context) {
return new Scaffold(
drawer: _makeDrawer(),
appBar: new AppBar(
title: new Center(
child: new Text("translate"),
),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.people_outline), onPressed: () {})
],
),
body: _phraseListFutureBuilder(), // this part of the code renders the listview
);
}
FutureBuilder _phraseListFutureBuilder() {
return new FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot) {
return mPhrases.isEmpty
? new CircularProgressIndicator()
: _buildPhrases();
},
future: _fetchData());
}
A Column was the right choice, but you will also need an Expanded widget to specify which widget should fill the remaining space:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'Search'
),
),
Expanded(
child: _phraseListFutureBuilder(),
)
],
);