1

Lo que quiero hacer es mostrar la imagen que está en poster_path (en la api) y tendría que ir al lado de cada titulo. Si no se puede traer la imagen de poster path de cada titulo y mostrarla, se me ocurre que podría descargar cada una pero sería mejor si se puede traer de la api cada una. Este codigo, es una app que tiene una search bar que trae titulos de peliculas de una api, lo que hace es traer 'title' que tiene el valor de cada pelicula y lo que necesito es que traiga 'poster_path' para cada pelicula y que salga el titulo y al lado la imagen de cada pelicula con un tamaño muy chico, muchas gracias!!

Esta es la api: https://api.themoviedb.org/3/movie/popular?api_key=&language=en-US&page=1

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
//Step 3
  _HomeScreenState() {
    _filter.addListener(() {
      if (_filter.text.isEmpty) {
        setState(() {
          _searchText = "";
          filteredNames = titulos;
        });
      } else {
        setState(() {
          _searchText = _filter.text;
        });
      }
    });
  }

//Step 1
  final TextEditingController _filter = new TextEditingController();
  final dio = new Dio(); // for http requests
  String _searchText = "";
  List titulos = new List(); // titulos we get from API
  List filteredNames = new List(); // names filtered by search text
  Icon _searchIcon = new Icon(Icons.search);
  Widget _appBarTitle = new Text('Search Example');

  //step 2.1
 void _getNames() async {
    final response = await dio.get(
        'https://api.themoviedb.org/3/movie/popular?api_key=0e685fd77fb3d76874a3ac26e0db8a4b&language=en-US&page=1');
    print(response.data);
    List tempList = new List();

   for (int i = 0; i < response.data['results'].length; i++) {
      tempList.add(response.data['results'][i]);
    }
    setState(() {
      titulos = tempList;
      filteredNames = titulos;
    });
  }

//Step 2.2
  void _searchPressed() {
    setState(() {
      if (this._searchIcon.icon == Icons.search) {
        this._searchIcon = new Icon(Icons.close);
        this._appBarTitle = new TextField(
          controller: _filter,
          decoration: new InputDecoration(
              prefixIcon: new Icon(Icons.search), hintText: 'Search...'),
        );
      } else {
        this._searchIcon = new Icon(Icons.search);
        this._appBarTitle = new Text('Search a movie');
        filteredNames = titulos;
        _filter.clear();
      }
    });
  }

  //Step 4
  Widget _buildList() {
    if (!(_searchText.isEmpty)) {
      List tempList = new List();
      for (int i = 0; i < filteredNames.length; i++) {
        if (filteredNames[i]['title']
            .toLowerCase()
            .contains(_searchText.toLowerCase())) {
          tempList.add(filteredNames[i]);
        }
      }
      filteredNames = tempList;
    }
    return ListView.builder(
      itemCount: titulos == null ? 0 : filteredNames.length,
      itemBuilder: (BuildContext context, int index) {
        return new ListTile(
          title: Text(filteredNames[index]['title']),
          onTap: () => print(filteredNames[index]['title']),
        );
      },
    );
  }

  //STep6
  Widget _buildBar(BuildContext context) {
    return new AppBar(
      centerTitle: true,
      title: _appBarTitle,
      leading: new IconButton(
        icon: _searchIcon,
        onPressed: _searchPressed,
      ),
    );
  }

  @override
  void initState() {
    _getNames();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildBar(context),
      body: Container(
        child: _buildList(),
      ),
      resizeToAvoidBottomPadding: false,
    );
  }
}

Lo que quiero hacer es mostrar la imagen que está en poster_path (en la api) y tendría que ir al lado de cada titulo. Si no se puede traer la imagen de poster path de cada titulo y mostrarla, se me ocurre que podría descargar cada una pero sería mejor si se puede traer de la api cada una.

1
  • Te recomiendo que siempre que quieras trabajar con imágenes de internet trabajes con FadeInImage, ya que esto le da mas estética a tu UI, pudiendo colocar PlaceHolder en lo que carga la imagen, y así mismo si en dado caso no pudiera cargar la imagen tiene la opción para mostrar una "Imagen de error". Saludos
    – YosephGX
    el 8 oct. 2023 a las 16:16

1 respuesta 1

1

solo concatena la url de fotos https://image.tmdb.org con el poster_path y obtienes este enlace https://image.tmdb.org/t/p/w500/xCEg6KowNISWvMh8GvPSxtdf9TO.jpg el cual lo muestras en el widget Image.network si requieres de un tamaño mas grande de la foto puedes verificar en el siguiente enlace https://www.themoviedb.org/talk/5aeaaf56c3a3682ddf0010de en en este ejemplo e usado un tamaño de 500.

 return ListView.builder(
  itemCount: titulos == null ? 0 : filteredNames.length,
  itemBuilder: (BuildContext context, int index) {
    return new ListTile(
      leading: Image.network('https://image.tmdb.org/t/p/w500${filteredNames[index]['poster_path']}'),
      title: Text(filteredNames[index]['title']),
      onTap: () => print(filteredNames[index]['title']),
    );
  },
);
1
  • Muchas gracias!!!!
    – Brian
    el 10 jun. 2021 a las 15:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.