Flutter - How can I show the half of image in pageview.builder() widget?

FaridAhmadov
June 17, 2023
179 views
0 votes
2 Answers

I want to display a full image of one car and a half-sized image of another car on each page view, with an animated transition between cars when the user changes the page. For a better understanding of my question, here is the code I have:

TabBarView(
  children: serviceCategories.map((e) {
    return PageView(
      children: e.services
          .map((e) => SizedBox(
                    height: 225,
                    //width: MediaQuery.of(context).size.width * 0.1,
                    child: PageView.builder(
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) =>
                          ServiceItemView(
                              isSelected: e.id ==
                                  (mainBloc.state as OrderPreview)
                                      .selectedService
                                      ?.id,
                              service: e,
                              currency: currency),
                      itemCount: serviceCategories
                          .map((e) => e)
                          .toList()
                          .length,
                    ),
                  ) /*ServiceItemView(
                service: e,
                isSelected: e.id ==
                    (mainBloc.state as OrderPreview)
                        .selectedService
                        ?.id,
                currency: currency,
              )*/
              )
          .toList(),
    );
  }).toList(),
),

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:ridy/app_colors.dart';
import '../config.dart';
import '../graphql/generated/graphql_api.graphql.dart';
import 'package:velocity_x/velocity_x.dart';
import 'package:intl/intl.dart';
import 'package:client_shared/theme/theme.dart';
import 'bloc/main_bloc.dart';

class ServiceItemView extends StatelessWidget {
  final bool isSelected;
  final GetFare$Query$CalculateFareDTO$ServiceCategory$Service service;
  final String currency;

  const ServiceItemView(
      {Key? key,
      required this.isSelected,
      required this.service,
      required this.currency})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mainBloc = context.read<MainBloc>();
    return GestureDetector(
      onTap: () => mainBloc.add(SelectService(service)),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 250),
        padding: const EdgeInsets.symmetric(horizontal: 4),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: isSelected
                ? CustomTheme.primaryColors.shade100
                : CustomTheme.primaryColors.shade50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 150,
              width: MediaQuery.of(context).size.width * 0.6,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                        serverUrl + service.media.address,
                      ))),
            ),
            // Image.network(
            //   serverUrl + service.media.address,
            //   width: MediaQuery.of(context).size.width,
            //   height: 150,
            // ),
            Row(
              children: [
                Text(
                  service.cost.toStringAsFixed(2),
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                      fontSize: 25,
                      fontWeight: FontWeight.normal,
                      decoration: (service.costAfterCoupon != null &&
                              service.cost != service.costAfterCoupon)
                          ? TextDecoration.lineThrough
                          : TextDecoration.none,
                      color: (service.costAfterCoupon != null &&
                              service.cost != service.costAfterCoupon)
                          ? CustomTheme.neutralColors.shade300
                          : //CustomTheme.neutralColors.shade800
                          AppColors.appMainColor),
                ),
                Text(
                  ' $currency',
                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
                        fontSize: 25,
                        fontWeight: FontWeight.normal,
                        color: (service.costAfterCoupon != null &&
                                service.cost != service.costAfterCoupon)
                            ? CustomTheme.neutralColors.shade300
                            : //CustomTheme.neutralColors.shade800
                            AppColors.appMainColor,
                      ),
                ),
              ],
            ),
            if (service.costAfterCoupon != null &&
                service.cost != service.costAfterCoupon)
              Row(
                children: [
                  Text(
                    service.costAfterCoupon.toString(),
                    style: Theme.of(context)
                        .textTheme
                        .titleMedium
                        ?.copyWith(color: const Color(0xff108910)),
                  ),
                  Text(
                    currency,
                    style: Theme.of(context)
                        .textTheme
                        .titleMedium
                        ?.copyWith(color: const Color(0xff108910)),
                  ),
                ],
              ).pOnly(top: 4),

            // Text(
            //   NumberFormat.simpleCurrency(name: currency).format(service.cost),
            //   style: Theme.of(context).textTheme.titleMedium?.copyWith(
            //       decoration: (service.costAfterCoupon != null &&
            //               service.cost != service.costAfterCoupon)
            //           ? TextDecoration.lineThrough
            //           : TextDecoration.none,
            //       color: (service.costAfterCoupon != null &&
            //               service.cost != service.costAfterCoupon)
            //           ? CustomTheme.neutralColors.shade300
            //           : CustomTheme.neutralColors.shade800),
            // ),
            // if (service.costAfterCoupon != null &&
            //     service.cost != service.costAfterCoupon)
            //   Text(
            //     NumberFormat.simpleCurrency(name: currency)
            //         .format(service.costAfterCoupon),
            //     style: Theme.of(context)
            //         .textTheme
            //         .titleMedium
            //         ?.copyWith(color: const Color(0xff108910)),
            //   ).pOnly(top: 4)
          ],
        ),
        // child: Row(
        //   children: [
        //     Image.network(
        //       serverUrl + service.media.address,
        //       width: 75,
        //       height: 75,
        //     ),
        //     Padding(
        //       padding: const EdgeInsets.symmetric(horizontal: 8),
        //       child: Column(
        //         crossAxisAlignment: CrossAxisAlignment.start,
        //         children: [
        //           Text(
        //             service.name,
        //             style: Theme.of(context).textTheme.titleMedium,
        //           ),
        //           if (service.description?.isNotEmpty ?? false)
        //             Text(
        //               service.description ?? "",
        //               style: Theme.of(context).textTheme.labelMedium,
        //             ).pOnly(top: 4)
        //         ],
        //       ),
        //     ),
        //     const Spacer(),
        //     Column(
        //       crossAxisAlignment: CrossAxisAlignment.center,
        //       children: [
        //         Text(
        //           NumberFormat.simpleCurrency(name: currency)
        //               .format(service.cost),
        //           style: Theme.of(context).textTheme.titleMedium?.copyWith(
        //               decoration: (service.costAfterCoupon != null &&
        //                       service.cost != service.costAfterCoupon)
        //                   ? TextDecoration.lineThrough
        //                   : TextDecoration.none,
        //               color: (service.costAfterCoupon != null &&
        //                       service.cost != service.costAfterCoupon)
        //                   ? CustomTheme.neutralColors.shade300
        //                   : CustomTheme.neutralColors.shade800),
        //         ),
        //         if (service.costAfterCoupon != null &&
        //             service.cost != service.costAfterCoupon)
        //           Text(
        //             NumberFormat.simpleCurrency(name: currency)
        //                 .format(service.costAfterCoupon),
        //             style: Theme.of(context)
        //                 .textTheme
        //                 .titleMedium
        //                 ?.copyWith(color: const Color(0xff108910)),
        //           ).pOnly(top: 4)
        //       ],
        //     ).pOnly(top: 4, right: 8)
        //   ],
        // ),
      ),
    );
  }
}

What can I do ? It is for customer app.When user selects ride type car image should change in this form

Tags: dart flutter

Answers

The transition effect you want is called the carousel effect and flutter has many great packages for it, out of which we can use flutter_carousel_widget 2.0.4. I have added a short example with specific properties that give you the desired effect. For more insight about that, visit the official site.

Complete Code : –

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: FlutterCarousel(
        options: CarouselOptions(
            viewportFraction: 0.7,
            enlargeCenterPage: true,
            pageSnapping: false,
            floatingIndicator: false,
            height: 250),
        items: [1, 2, 3, 4, 5].map((i) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                  margin: const EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: BoxDecoration(color: Colors.blue[200]),
                  alignment: Alignment.center,
                  child: Text(
                    'Car $i',
                    style: const TextStyle(fontSize: 16.0),
                  ));
            },
          );
        }).toList(),
      ),
    ));
  }
}

Output : –

- hakandl
- June 17, 2023 at 3:23 pm
- 0 votes
0
Ramji’s answer may also work for you, but you can also do it without using a package. For this, you just need to define a controller to pageview and specify the viewportFraction value in this controller.
```
PageController controller = PageController(viewportFraction: 0.8);

PageView.builder(
    controller: controller,
)
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How can I show the half of image in pageview.builder() widget?

Answers