"
try to fetch images from post content images to show in carousel slider fluttter how to convert list of images to strings to show carousel slider
final List<Articles?> articles ;
int _currentindex = 0;
late List _articles ;
_articles = widget.articles.map((e) => CarouselCard(imageUrl: e!.gallery,)).toList();
CarouselSlider(
options: CarouselOptions(
height: 700,
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 1,
onPageChanged: (index, reason) {
setState(() {
_currentindex = index;
});
}
), items: _articles,
),
Related
Is there a way to catch only the final search to send in Firebase Analytics event?
_searchPressed() {
final FirebaseAnalytics analytics = FirebaseAnalytics.instance;
setState(() {
if (this._searchIcon.icon == Icons.search) {
this._searchIcon = new Icon(Icons.close);
this._appBarTitle = TextField(
decoration: new InputDecoration(
prefixIcon: new Icon(Icons.search),
),
onChanged: (text) {
text = text.toLowerCase();
setState(() {
_itemForDisplay = _item.where((item) {
var itemTitle = item.code.toLowerCase();
return itemTitle.contains(text);
}).toList();
if (text.length > 6) {
analytics.logEvent(
name: text.replaceAll(' ', ''),
parameters: {'term': text.replaceAll(' ', ''), 'vaule': 1});
//space not allowed in firebase
}
});
},
);
} else {
this._searchIcon = new Icon(Icons.search);
this._appBarTitle = new Text( 'Search bar' );
analytics.logEvent(
name: 'search_done',
parameters: {'term': "close", 'vaule': 1});
_itemForDisplay = _item;
}
});
}
A satisfactory solution is to capture the search when closing search is selected. The search is done simultaneously so there is no information when the search is completed. The only information about the end of the search is when you touch the close icon. Another option would be the longest search text.
Im new using nodejs functions and also puppeteer. Previously I was using wkhtmltopdf but currently its options are very poor.
So, my idea was generating a pdf from a html with a first cover page (an image with full A4 width/height ), since the footer is generated from the index.js, theres no way to hide it on the FIRST page of the PDF.
//Imports
const puppeteer = require('puppeteer');
//Open browser
async function startBrowser() {
const browser = await puppeteer.launch({headless: true, args:['--no-sandbox']});
const page = await browser.newPage();
return {browser, page};
}
//Close browser
async function closeBrowser(browser) {
return browser.close();
}
//Html to pdf
async function html2pdf(url) {
const {browser, page} = await startBrowser();
await page.goto(url, {waitUntil: 'networkidle2'});
await page.emulateMedia('screen');
//Options
await page.pdf({
printBackground: true,
path: 'result.pdf',
displayHeaderFooter: true,
footerTemplate: '<div style="width:100%;text-align:right;position:relative;top:10px;right:10px;"><img width="60px" src="data:data:image/..."'
margin : {top: '0px',right: '0px',bottom: '40px',left: '0px' },
scale: 1,
landscape: false,
format: 'A4',
pageRanges: ""
});
}
//Exec
(async () => {
await html2pdf('file:///loc/node_pdfs/givenhtml.html');
process.exit(1);
})();
My question is, is there any way to locate the first footer and hide it from the index fuction?
Thanks!
There are currently multiple bugs (see this question/answer or this one) that make it impossible to get this working.
This is currently only possible for headers using this trick (taken from this github comment):
await page.addStyleTag({
content: `
body { margin-top: 1cm; }
#page:first { margin-top: 0; }
`,
});
This will basically hide the margin on the first page, but will not work when using a bottom margin (as also noted here).
Possible Solution
The solution I recommend is to create two PDFs, one with only the first page and no margins, and another one with the remaining pages and a margin:
await page.pdf({
displayHeaderFooter: false,
pageRanges: '1',
path: 'page1.pdf',
});
await page.pdf({
displayHeaderFooter: true,
footerTemplate: '<div style="font-size:5mm;">Your footer text</div>',
margin: {
bottom: '10mm'
},
pageRanges: '2-', // start this PDF at page 2
path: 'remaining-pages.pdf',
});
Depending on how often you need to perform the task you could either manually merge the PDFs or automate it using a tool like easy-pdf-merge (I have not used this one myself).
small hint: easy-pdf-merge an pdf-merge have some "system-tools-dependencies"
I prefer pdf-lib, a plain js tool where you can use Buffers and Typescript support
My Typescript:
import {PDFDocument} from 'pdf-lib'
...
const options: PDFOptions = {
format: 'A4',
displayHeaderFooter: true,
footerTemplate: footerTemplate,
margin: {
top: '20mm',
bottom: '20mm',
},
}
const page1: Buffer = await page.pdf({
...options,
headerTemplate: '<div><!-- no header hack --></div>',
pageRanges: '1',
})
const page2: Buffer = await page.pdf({
...options,
headerTemplate: headerTemplate,
pageRanges: '2-',
})
const pdfDoc = await PDFDocument.create()
const coverDoc = await PDFDocument.load(page1)
const [coverPage] = await pdfDoc.copyPages(coverDoc, [0])
pdfDoc.addPage(coverPage)
const mainDoc = await PDFDocument.load(page2)
for (let i = 0; i < mainDoc.getPageCount(); i++) {
const [aMainPage] = await pdfDoc.copyPages(mainDoc, [i])
pdfDoc.addPage(aMainPage)
}
const pdfBytes = await pdfDoc.save()
// Buffer for https response in my case
return Buffer.from(pdfBytes)
...
I have createMaterialTopTabNavigator in my app with three tabs. These three tabs themselves belong to different createStackNavigators. I have passed drawer icon as my header right to createMaterialTopTabNavigator.
I want to edit the background color of createMaterialTopTabNavigator tabs but it is getting override with my HeaderRight icon styling.
const Daily = createStackNavigator(
{
Daily: {
screen: DailyStack,
},
Another:{
screen: Another,
}
},
{
headerMode:'none'
},
);
const Monthly = createStackNavigator({
Monthly: {
screen: MonthlyStack,
},
},
{
headerMode:'none'
});
const Range = createStackNavigator({
Range: {
screen: RangeStack,
}
},
{
headerMode:'none'
});
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
navigationOptions: ({ navigation }) => {
return {
// tabBarOptions:{
// indicatorStyle: {
// backgroundColor: "#2E86C1",
// },
// // tabStyle:{
// // backgroundColor: '#F7F9F9'
// // },
// labelStyle :{
// color: '#2E86C1'
// },
// activeTintColor:'blue',
// inactiveTintColor: {
// color: 'green'
// },
// style: {
// backgroundColor: 'white',
// elevation: 0, // remove shadow on Android
// shadowOpacity: 0, // remove shadow on iOS,
// borderWidth:1,
// borderColor:'#ccc'
// }
// },
headerRight: (
<Icon style={{ paddingRight:20 }} onPress={() => navigation.openDrawer()} name="menu" color='#000' size={30} />
)
};
}
}
)
If I am passing the styling options inside navigationOptions then the styling does not works; only HeaderRight shows, and if I pass the styling options outside the navigationOptions, the styling works but then it hides the HeaderRight Icon from right
you must entirely study this link.
another important subject is that navigationOptions related to every screen in stack. such as this:
const App = createMaterialTopTabNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#633689',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
so if you want to set style for top tab bar, you must use defaultNavigationOptions property such as this:
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
tabBarOptions:{
style: {
backgroundColor: 'white',
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'#ccc'
}
},
};
}
}
)
Sharing common navigationOptions across screens
It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the DetailsScreen the colors go back to the defaults. Wouldn't it be awful if we had to copy the navigationOptions header style properties from HomeScreen to DetailsScreen, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the property defaultNavigationOptions.
I have a map with location markers and I want to change the size of the markers when a user zooms in/out. I'm capturing the zoom level in state and it's a floating point number (i.e. 11.3235).
How can I pass this number (from state) to a css class so the size of my markers would dynamically change its size? Instead of having a small/medium/large marker, I want the width and height of my marker to be precise according to the zoom level.
class Mapbox extends Component {
constructor(props){
super(props)
this.state = {
viewport: {
width: 900,
height: 500,
latitude: 49.2463,
longitude: -123.1162,
zoom: 11
},
active_vehicles: [],
marker_size: 0,
};
}
_onViewportChange = viewport => {
this.setState({viewport});
// Depending on zoom level, change Markers' class to dynamically change their display size/style
this.setState({marker_size: this.state.viewport.zoom})
};
createMarkers = () => {
let markers = []
if(this.state.active_vehicles){
for (let i = 0; i < this.state.active_vehicles.length; i++) {
markers.push(
<Marker key={i} latitude={this.state.active_vehicles[i]["Latitude"]} longitude={this.state.active_vehicles[i]["Longitude"]}>
<div className={"location-marker " + this.state.marker_size}></div>
</Marker>
)
}
return markers
}
}
render() {
return (
<ReactMapGL
// mapbox API access token
mapboxApiAccessToken={MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v9"
{...this.state.viewport}
onViewportChange={this._onViewportChange}>
<div>
{this.createMarkers()}
</div>
</ReactMapGL>
);
}
}
I'd like to be able to edit the content attribute of visjs timeline items in the timeline itself. However, when I use an input as part of a template, it doesn't appear to receive any mouse events; I can't click in it and type anything, and clicking buttons doesn't work, either. Buttons appear to get the mouseover event, though:
function test(item) {
alert('clicked');
}
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
min: new Date('2015-01-01'),
max: new Date('2015-12-31'),
zoomMin: 1000 * 4 * 60 * 24 * 7,
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div onClick="test"><input value="click in the middle"></input><button onClick="test">test</button></div>'
}
};
/* create timeline */
timeline.on('click', function (properties) {
var target = properties.event.target;
if(properties.item) properties.event.target.focus();
});
https://codepen.io/barticula/pen/EpWJKd
Edit: Code above CodePen example have been updated to use the click event to focus on the input, but all other normal mouse behavior is missing. Keyboard events appear to function normally.
To get a reaction with a click on a timeline element, you can use the library's own events (see events on doc and this exemple on website).
On your example, you could do something like this among other possible solutions in pure javascript including...
// Configuration for the Timeline
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
min: new Date('2015-01-01'),
max: new Date('2015-12-31'),
zoomMin: 1000 * 4 * 60 * 24 * 7,
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div id="test-div"><input placeholder="hey" type="text" id="inputTest" ><button id="test-button">test</button></div>'
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
timeline.on('click', function (properties) {
var target = properties.event.target;
if(properties.item) alert('click on' + target.id);
});
UPDATED
It is difficult to know exactly what you want to do because there are several possible solutions anyway.
Eventually, I propose another snippet below and a codepen updated.... but will it meet your need, not sure ?
2nd UPDATE (for another work track, see comments)
// Configuration for the Timeline
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div><input placeholder="edit me..." type="text"></input><button>send value</button></div>'
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
timeline.on('click', function(properties) {
var target = properties.event.target;
var item = items.get(properties.item);
console.log(properties.event);
// if (properties.item && target.tagName === "DIV") focusMethod(target);
if (properties.item && target.tagName === "INPUT") target.focus();
if (properties.item && target.tagName === "BUTTON") getInputValue(item, target);
});
focusMethod = function getFocus(target) {
// target.insertAfter("BUTTON");
target.firstChild.focus();
}
getInputValue = function getValue(item, target) {
target.focus();
var inputValue = (target.parentNode.firstChild.value) ? target.parentNode.firstChild.value : "no value entered ";
alert("Input value : " + inputValue + " => send by: " + item.content)
}