在欢迎界面的最后一项显示按钮。

huangapple go评论65阅读模式
英文:

Show button in the last item of a welcomescreen

问题

以下是您要翻译的内容:

WelcomeScreen.dart

import 'package:flutter/material.dart';
import '/items.dart';
import '/SecondRoute.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  List<Widget> slides = items
      .map((item) => Container(
            padding: EdgeInsets.symmetric(horizontal: 18.0),
            child: Column(
              children: <Widget>[
                Flexible(
                  flex: 1,
                  fit: FlexFit.tight,
                  child: Image.asset(
                    item['image'],
                    fit: BoxFit.fitWidth,
                    width: 220.0,
                    alignment: Alignment.bottomCenter,
                  ),
                ),
                Flexible(
                  flex: 1,
                  fit: FlexFit.tight,
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 30.0),
                    child: Column(
                      children: <Widget>[
                        Text(item['header'],
                            style: TextStyle(
                                fontSize: 50.0,
                                fontWeight: FontWeight.w300,
                                color: Color(0XFF3F3D56),
                                height: 2.0)),
                        Text(
                          item['description'],
                          style: TextStyle(
                              color: Colors.grey,
                              letterSpacing: 1.2,
                              fontSize: 16.0,
                              height: 1.3),
                          textAlign: TextAlign.center,
                        ),
                        if (true)
                          ElevatedButton(
                            child: const Text('Open route'),
                            onPressed: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => const SecondRoute()),
                              );
                            },
                          ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ))
      .toList();

  List<Widget> indicator() => List<Widget>.generate(
      slides.length,
      (index) => Container(
            margin: EdgeInsets.symmetric(horizontal: 3.0),
            height: 10.0,
            width: 10.0,
            decoration: BoxDecoration(
                color: currentPage.round() == index
                    ? Color(0XFF256075)
                    : Color(0XFF256075).withOpacity(0.2),
                borderRadius: BorderRadius.circular(10.0)),
          ));

  double currentPage = 0.0;
  final _pageViewController = new PageController();

  @override
  void initState() {
    super.initState();
    _pageViewController.addListener(() {
      setState(() {
        currentPage = _pageViewController.page!;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: <Widget>[
            PageView.builder(
              controller: _pageViewController,
              itemCount: slides.length,
              itemBuilder: (BuildContext context, int index) {
                return slides[index];
              },
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                margin: EdgeInsets.only(top: 70.0),
                padding: EdgeInsets.symmetric(vertical: 40.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: indicator(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

items.dart

List items = [
  {
    "header": "Learn",
    "description":
        "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/2.png"
  },
  {
    "header": "Build",
    "description":
        "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/3.png"
  },
  {
    "header": "Launch",
    "description":
        "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/1.png"
  },
  {
    "header": "Invest",
    "description":
        "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/5.png"
  },
  {
    "header": "Travel",
    "description":
        "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/4.png",
    "button": "true",
  },
];
英文:

I have a problem. I want to show a welcomescreen, with different screen. And when the last screen is shown the button should be also shown. So that the user jumps from welcomescreen to the secondscreen. How can I do this?

In my code it does not regoncie the context and I don't know how I could create the if condition.

WelcomeScreen.dart

import &#39;package:flutter/material.dart&#39;;
import &#39;/items.dart&#39;;
import &#39;/SecondRoute.dart&#39;;

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() =&gt; _WelcomeScreenState();
}

class _WelcomeScreenState extends State&lt;WelcomeScreen&gt; {
  List&lt;Widget&gt; slides = items
      .map((item) =&gt; Container(
      padding: EdgeInsets.symmetric(horizontal: 18.0),
      child: Column(
        children: &lt;Widget&gt;[
          Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Image.asset(
              item[&#39;image&#39;],
              fit: BoxFit.fitWidth,
              width: 220.0,
              alignment: Alignment.bottomCenter,
            ),
          ),
          Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 30.0),
              child: Column(
                children: &lt;Widget&gt;[
                  Text(item[&#39;header&#39;],
                      style: TextStyle(
                          fontSize: 50.0,
                          fontWeight: FontWeight.w300,
                          color: Color(0XFF3F3D56),
                          height: 2.0)),
                  Text(
                    item[&#39;description&#39;],
                    style: TextStyle(
                        color: Colors.grey,
                        letterSpacing: 1.2,
                        fontSize: 16.0,
                        height: 1.3),
                    textAlign: TextAlign.center,
                  ),
                  if (true)
                    ElevatedButton(
                      child: const Text(&#39;Open route&#39;),
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) =&gt; const SecondRoute()),
                        );
                      },
                    ),
                ],
              ),
            ),
          )
        ],
      )))
      .toList();

  List&lt;Widget&gt; indicator() =&gt; List&lt;Widget&gt;.generate(
      slides.length,
          (index) =&gt; Container(
        margin: EdgeInsets.symmetric(horizontal: 3.0),
        height: 10.0,
        width: 10.0,
        decoration: BoxDecoration(
            color: currentPage.round() == index
                ? Color(0XFF256075)
                : Color(0XFF256075).withOpacity(0.2),
            borderRadius: BorderRadius.circular(10.0)),
      ));

  double currentPage = 0.0;
  final _pageViewController = new PageController();

  @override
  void initState() {
    super.initState();
    _pageViewController.addListener(() {
      setState(() {
        currentPage = _pageViewController.page!;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: &lt;Widget&gt;[
            PageView.builder(
              controller: _pageViewController,
              itemCount: slides.length,
              itemBuilder: (BuildContext context, int index) {
                return slides[index];
              },
            ),
            Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.only(top: 70.0),
                  padding: EdgeInsets.symmetric(vertical: 40.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: indicator(),
                  ),
                )
              //  ),
            )
            // )
          ],
        ),
      ),
    );
  }
}

items.dart

List items = [
  {
    &quot;header&quot;: &quot;Learn&quot;,
    &quot;description&quot;:
    &quot;Online chat which provides its users maximum functionality to simplify the search&quot;,
    &quot;image&quot;: &quot;assets/images/2.png&quot;
  },
  {
    &quot;header&quot;: &quot;Build&quot;,
    &quot;description&quot;:
    &quot;Online chat which provides its users maximum functionality to simplify the search&quot;,
    &quot;image&quot;: &quot;assets/images/3.png&quot;
  },
  {
    &quot;header&quot;: &quot;Launch&quot;,
    &quot;description&quot;:
    &quot;Online chat which provides its users maximum functionality to simplify the search&quot;,
    &quot;image&quot;: &quot;assets/images/1.png&quot;
  },
  {
    &quot;header&quot;: &quot;Invest&quot;,
    &quot;description&quot;:
    &quot;Online chat which provides its users maximum functionality to simplify the search&quot;,
    &quot;image&quot;: &quot;assets/images/5.png&quot;
  },
  {
    &quot;header&quot;: &quot;Travel&quot;,
    &quot;description&quot;:
    &quot;Online chat which provides its users maximum functionality to simplify the search&quot;,
    &quot;image&quot;: &quot;assets/images/4.png&quot;,
    &quot;button&quot;: &quot;true&quot;,
  }
];

答案1

得分: 2

只需检查项目是否包含button键,并相应显示按钮。

if (item.containsKey('button') && item['button'] == 'true')
    ElevatedButton(
      child: const Text('Open route'),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const SecondRoute()),
        );
      },
    ),

对于您遇到的新问题The instance member 'context' can't be accessed in an initializer.,请将PageView更改为使用items

PageView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return slide(items[index]);
  },
),

然后,更新幻灯片的初始化列表以访问上下文。

从:

List<Widget> slides = items
  .map((item) => Container(
  padding: EdgeInsets.symmetric(horizontal: 18.0),

更改为:

Widget slide(Map<String, dynamic> item) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 18.0),
    child: Column(
      children: <Widget>[

完整代码在dartpad.dev中。

英文:

You just have to check if the item contains the button key and display the button accordingly

            if (item.containsKey(&#39;button&#39;) &amp;&amp; item[&#39;button&#39;] == &#39;true&#39;)
ElevatedButton(
child: const Text(&#39;Open route&#39;),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) =&gt; const SecondRoute()),
);
},
),

For the new issue you are getting
The instance member &#39;context&#39; can&#39;t be accessed in an initializer.,

Change the pageview to use the items.

PageView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return slide(items[index]);
},
),

Then update the initialized list of slides to the custom widget to access the context.

Update the slides from

List&lt;Widget&gt; slides = items
.map((item) =&gt; Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),

to

Widget slide(Map&lt;String, dynamic&gt; item) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: Column(
children: &lt;Widget&gt;[

Full code in dartpad.dev.

huangapple
  • 本文由 发表于 2023年6月5日 18:18:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76405452.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定