Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
405 views
in Technique[技术] by (71.8m points)

how can make it odd even design i mean i want show to different designs in listtile in flutter?

i want something like this this is how i want to show listtile

i want same design in above image in my song listtile

so plz help me to achieved this design

**here what i am getting ** this is what i am. getting when i used item.hashcode.isOdd

i want to show different design in the listtile which i am fetching data from api

here is my code :-

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:punjabi_collection/screens/youtubeplayerscreen.dart';
import 'package:punjabi_collection/services/api_manage.dart';
import 'package:punjabi_collection/services/youtube_model.dart';

class YoutubePlay extends StatefulWidget {
  @override
  _YoutubePlayState createState() => _YoutubePlayState();
}

class _YoutubePlayState extends State<YoutubePlay> {
  YoutubeData _youtubeData;
  List<Item> _list = [];

  bool _loading;

  @override
  void initState() {
    super.initState();
    _loading = true;
    _getYoutubeData();
  }

  _getYoutubeData() async {
    _youtubeData = await YoutubeService.getYotubeData();
    _list = _youtubeData.items;

    setState(() {
      _loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Videos '),
        elevation: 0.0,
      ),
      body: _loading
          ? Center(
              child: CircularProgressIndicator(),
            )
          : Container(
              child: ListView.builder(
                  physics: ScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: _list == null ? 0 : _list.length,
                  itemBuilder: (context, index) {
                    Item item = _list[index];

                    return InkWell(
                      onTap: () async {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return YoutubePlayerScreen(
                            item: item,
                          );
                        }));
                      },
                      child: Card(
                        color: item.hashCode.isOdd
                            ? Colors.blue
                            : Color(0xffEF6236),
                        margin: EdgeInsets.all(20.0),
                        elevation: 10,
                        shadowColor: Colors.blue,
                        clipBehavior: Clip.antiAlias,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24),
                        ),
                        child: Column(
                          children: [
                            Stack(
                              alignment: Alignment.center,
                              children: [
                                Image(
                                  image: NetworkImage(
                                      item.snippet.thumbnails.high.url),
                                  fit: BoxFit.fitWidth,
                                ),
                                if (item.hashCode.isEven)
                                  Image.asset(
                                    './assets/playbb.png',
                                    width: 100.0,
                                  )
                                else
                                  Image.asset(
                                    './assets/playblue.png',
                                    width: 100.0,
                                  )
                              ],
                            ),
                            Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Container(
                                child: Text(
                                  item.snippet.title,
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    );
                  }),
            ),
    );
  }
}
question from:https://stackoverflow.com/questions/65879459/how-can-make-it-odd-even-design-i-mean-i-want-show-to-different-designs-in-listt

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...