Can't make Stack of Widgets clickable after exporting Widget from Adobe XD

0

I want to add one widget I've exported from Adobe XD to ListView.separated and in that widget I want two places to be clickable, however I cannot completely understand where should I put InkWell() or GestureDetector() or maybe another widget to make two places clickable Here is the code:

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

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.only(
            top: 30.0,
          ),
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    SizedBox(
                      width: 100.0,
                      child: Text(
                        'Logout',
                        textAlign: TextAlign.center,
                        textScaleFactor: 1.0,
                        style: TextStyle(
                          color: Colors.blueGrey,
                          fontSize: 22.0,
                          fontWeight: FontWeight.w300,
                        ),
                      ),
                    ),
                    Image.asset(
                      'assets/call_info_logo.png',
                      width: 60.0,
                    ),
                    Row(
                      children: <Widget>[
                        SizedBox(
                          width: 100.0,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Image.asset(
                                'assets/support.png',
                                width: 55.0,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Flexible(
                child: Container(
                  margin: EdgeInsets.only(top: 55.0),
                  child: ListView.separated(
                    padding: EdgeInsets.only(
                      left: 30.0,
                      right: 30.0,
                      bottom: 30.0,
                    ),
                    itemCount: 6,
                    separatorBuilder: (context, index) => SizedBox(
                      height: 40.0,
                    ),
                    itemBuilder: (context, index) => Stack(
                      children: <Widget>[
                        Transform.translate(
                          offset: Offset(-21.0, -259.0),
                          child: Stack(
                            children: <Widget>[
                              Transform.translate(
                                offset: Offset(85.0, 259.0),
                                child: SvgPicture.string(
                                  _svg_chij22,
                                  allowDrawingOutsideViewBox: true,
                                ),
                              ),
                              Transform.translate(
                                offset: Offset(-7.0, 139.0),
                                child: Stack(
                                  children: <Widget>[
                                    Transform.translate(
                                      offset: Offset(102.0, 132.0),
                                      child: SizedBox(
                                        width: 171.0,
                                        height: 57.0,
                                        child: SingleChildScrollView(
                                            child: Text(
                                          'г. Нур-Султан, ул.  Кордай, д.2, под.4 ',
                                          style: TextStyle(
                                            fontFamily: 'Bahnschrift',
                                            fontSize: 18,
                                            color: const Color(0xffffffff),
                                          ),
                                          textAlign: TextAlign.center,
                                        )),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Transform.translate(
                          offset: Offset(-21.0, -259.0),
                          child: Stack(
                            children: <Widget>[
                              Transform.translate(
                                offset: Offset(281.0, 259.0),
                                child: SvgPicture.string(
                                  _svg_fep8be,
                                  allowDrawingOutsideViewBox: true,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Transform.translate(
                          offset: Offset(-21.0, -259.0),
                          child: Stack(
                            children: <Widget>[
                              Transform.translate(
                                offset: Offset(21.0, 259.0),
                                child: Container(
                                  width: 61.0,
                                  height: 80.0,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(25.0),
                                      bottomLeft: Radius.circular(25.0),
                                    ),
                                    color: const Color(0xffcfdb24),
                                  ),
                                ),
                              ),
                              Transform.translate(
                                offset: Offset(37.0, 280.0),
                                child:
                                    // Adobe XD layer: 'Icon awesome-file-v…' (shape)
                                    SvgPicture.string(
                                  _svg_xqnie9,
                                  allowDrawingOutsideViewBox: true,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

const String _svg_chij22 =
    '<svg viewBox="85.0 259.0 193.0 80.0" ><path transform="translate(85.0, 259.0)" d="M 0 0 L 193 0 L 193 80 L 0 80 L 0 0 Z" fill="#2a7ac6" fill-opacity="0.85" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';
const String _svg_fep8be =
    '<svg viewBox="281.0 259.0 61.0 80.0" ><path transform="matrix(-1.0, 0.0, 0.0, -1.0, 342.0, 339.0)" d="M 25 0 L 60 0 C 60.55228424072266 0 61 0.4477152228355408 61 1 L 61 79 C 61 79.55228424072266 60.55228424072266 80 60 80 L 25 80 C 11.19288063049316 80 0 68.80712127685547 0 55 L 0 25 C 0 11.19288063049316 11.19288063049316 0 25 0 Z" fill="#16cf2f" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /><path transform="translate(295.0, 276.0)" d="M 29.01785659790039 20.07470893859863 L 11.0267858505249 20.07470893859863 L 11.0267858505249 11.98993682861328 C 11.0267858505249 8.884631156921387 13.32645130157471 6.304718494415283 16.19921875 6.273351669311523 C 19.10100364685059 6.241985321044922 21.47321510314941 8.790531158447266 21.47321510314941 11.91936206817627 L 21.47321510314941 13.17403030395508 C 21.47321510314941 14.21697330474854 22.24944305419922 15.05603408813477 23.21428489685059 15.05603408813477 L 25.53571510314941 15.05603408813477 C 26.50055694580078 15.05603408813477 27.27678489685059 14.21697330474854 27.27678489685059 13.17403030395508 L 27.27678489685059 11.91936206817627 C 27.27678489685059 5.332350254058838 22.3074779510498 -0.02351734600961208 16.2137279510498 7.694517080381047e-06 C 10.1199779510498 0.02353273518383503 5.223214149475098 5.449975490570068 5.223214149475098 12.0369873046875 L 5.223214149475098 20.07470893859863 L 3.482142925262451 20.07470893859863 C 1.559709787368774 20.07470893859863 0 21.76066970825195 0 23.83871650695801 L 0 36.38540267944336 C 0 38.46344757080078 1.559709787368774 40.14941024780273 3.482142925262451 40.14941024780273 L 29.01785659790039 40.14941024780273 C 30.9402904510498 40.14941024780273 32.5 38.46344757080078 32.5 36.38540267944336 L 32.5 23.83871650695801 C 32.5 21.76066970825195 30.9402904510498 20.07470893859863 29.01785659790039 20.07470893859863 Z" fill="#ffffff" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';
const String _svg_xqnie9 =
    '<svg viewBox="37.0 280.0 30.0 39.0" ><path transform="translate(37.0, 280.0)" d="M 29.99999809265137 9.288474082946777 L 29.99999809265137 9.75 L 19.99999809265137 9.75 L 19.99999809265137 0 L 20.47335815429688 0 C 20.97062301635742 0 21.44757461547852 0.1926386654376984 21.79921913146973 0.535412073135376 L 29.45085716247559 7.995761394500732 C 29.80244445800781 8.338640213012695 29.99996948242188 8.803627014160156 29.9999942779541 9.288474082946777 Z M 17.49999618530273 10.359375 L 17.49999618530273 0 L 1.87499988079071 0 C 0.8394531011581421 0 0 0.8184667825698853 0 1.828125 L 0 37.171875 C 0 38.18153381347656 0.8394531011581421 39 1.87499988079071 39 L 28.12499809265137 39 C 29.16054344177246 39 29.99999809265137 38.18153381347656 29.99999809265137 37.171875 L 29.99999809265137 12.1875 L 19.37499618530273 12.1875 C 18.34374809265137 12.1875 17.49999618530273 11.36484432220459 17.49999618530273 10.359375 Z M 24.99999618530273 21.329345703125 L 24.99999618530273 29.8577766418457 C 24.99999618530273 31.49127960205078 22.97320175170898 32.29512405395508 21.79913711547852 31.15048980712891 L 17.49999618530273 26.96035003662109 L 17.49999618530273 29.859375 C 17.49999618530273 30.86903190612793 16.66054725646973 31.6875 15.62499904632568 31.6875 L 6.874999523162842 31.6875 C 5.839452743530273 31.6875 4.999999523162842 30.86903190612793 4.999999523162842 29.859375 L 4.999999523162842 21.328125 C 4.999999523162842 20.31846809387207 5.839452743530273 19.5 6.874999523162842 19.5 L 15.62499904632568 19.5 C 16.66054725646973 19.5 17.49999618530273 20.31846809387207 17.49999618530273 21.328125 L 17.49999618530273 24.22715187072754 L 21.79913711547852 20.03670692443848 C 22.97187042236328 18.89336776733398 24.99999618530273 19.69462013244629 24.99999618530273 21.329345703125 Z" fill="#ffffff" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';

I want to make these two buttons clickable

flutter
dart
asked on Stack Overflow May 31, 2020 by isfun

2 Answers

1

This is the most simple way to add any kind of action to the specific widget - wrap it with InkWell. In your case, it will look something like this:

InkWell(
  onTap: () {},
  child: Transform.translate(
    offset: Offset(85.0, 259.0),
    child: SvgPicture.string(
      _svg_chij22,
      allowDrawingOutsideViewBox: true,
     ),
   ),
 ),
answered on Stack Overflow May 31, 2020 by Alexey Kunakov
0

just wrap the widget either with GestureDetector or InkWell which needs to accept user's tap.

e.g. you can wrap your widget with GestureDetector it will provide you a onTap delegate.

                  GestureDetector(
                  onTap: () {print('Hi') }
                      child:
                        SizedBox(
                          width: 100.0,
                          child: Text(
                            'Logout',
                            textAlign: TextAlign.center,
                            textScaleFactor: 1.0,
                             style: TextStyle(
                              color: Colors.blueGrey,
                              fontSize: 22.0,
                              fontWeight: FontWeight.w300,
                            ),
                          ),
                        ),)
answered on Stack Overflow May 31, 2020 by Tolga Kartal

User contributions licensed under CC BY-SA 3.0