Pen Settings

JavaScript

Babel includes JSX processing.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Flutter

              
                import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Flutter News".toUpperCase(),
            style: TextStyle(fontWeight: FontWeight.w700),
          ),
        ),
        body: CollectionIfWhy(),
      ),
    );
  }
}

class WithoutCollectionIfWhy extends StatefulWidget {
  @override
  _WithoutCollectionIfWhyState createState() => _WithoutCollectionIfWhyState();
}

class _WithoutCollectionIfWhyState extends State<WithoutCollectionIfWhy> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    var news = allNews[selected];
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
        children: [
          Title(news.headline),
          (news.cover != null) ? FeatureImage(news.cover) : Container(),
          ...news.paragraphs.map((paragraph) => Paragraph(paragraph)).toList(),
          (news.author != null) ? Authored(news.author) : Container(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              (selected > 0) ? nextButton() : Container(),
              (selected < (allNews.length - 1)) ? prevButton() : Container(),
            ],
          )
        ],
      ),
    );
  }

  MaterialButton prevButton() {
    return MaterialButton(
      child: Text(
        "Next News   >>",
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.green,
      onPressed: () {
        setState(() {
          selected += 1;
        });
      },
    );
  }

  MaterialButton nextButton() {
    return MaterialButton(
      color: Colors.blue,
      child: Text(
        "<<   Previous News",
        style: TextStyle(color: Colors.white),
      ),
      onPressed: () {
        setState(() {
          selected -= 1;
        });
      },
    );
  }
}

class CollectionIfWhy extends StatefulWidget {
  @override
  _CollectionIfWhyState createState() => _CollectionIfWhyState();
}

class _CollectionIfWhyState extends State<CollectionIfWhy> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    var news = allNews[selected];
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
        children: [
          Title(news.headline),
          if (news.cover != null) FeatureImage(news.cover),
          for (var paragraph in news.paragraphs) Paragraph(paragraph),
          if (news.author != null) Authored(news.author),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (selected > 0) nextButton(),
              if (selected < (allNews.length - 1)) prevButton(),
            ],
          )
        ],
      ),
    );
  }

  MaterialButton prevButton() {
    return MaterialButton(
      child: Text(
        "Next News   >>",
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.green,
      onPressed: () {
        setState(() {
          selected += 1;
        });
      },
    );
  }

  MaterialButton nextButton() {
    return MaterialButton(
      color: Colors.blue,
      child: Text(
        "<<   Previous News",
        style: TextStyle(color: Colors.white),
      ),
      onPressed: () {
        setState(() {
          selected -= 1;
        });
      },
    );
  }
}

class Authored extends StatelessWidget {
  const Authored(this.author);

  final String author;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Written by: "),
          Text(
            author.toUpperCase(),
            style: TextStyle(fontWeight: FontWeight.w700),
          ),
        ],
      ),
    );
  }
}

class Paragraph extends StatelessWidget {
  const Paragraph(this.paragraph);

  final String paragraph;

  @override
  Widget build(BuildContext context) {
    if (paragraph.toLowerCase().contains("tips")) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
              border: Border(
            top: BorderSide(color: Colors.green, width: 2),
            left: BorderSide(color: Colors.green, width: 2),
            right: BorderSide(color: Colors.green, width: 2),
            bottom: BorderSide(color: Colors.green, width: 2),
          )),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(paragraph),
          ),
        ),
      );
    } else {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(paragraph),
      );
    }
  }
}

class FeatureImage extends StatelessWidget {
  const FeatureImage(this.featureImage);

  final String featureImage;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16.0),
      child: Image.network(featureImage),
    );
  }
}

class Title extends StatelessWidget {
  const Title(this.headline);

  final String headline;

  @override
  Widget build(BuildContext context) {
    return Text(
      headline,
      textAlign: TextAlign.center,
      style: Theme.of(context)
          .textTheme
          .headline5
          .copyWith(fontWeight: FontWeight.w700),
    );
  }
}

class NewsModel {
  String headline;
  String cover;
  List<String> paragraphs;
  String author;

  NewsModel({this.headline, this.cover, this.paragraphs, this.author});
}

var allNews = [
  NewsModel(
      headline: "Flutter Supports Collection if and Collection for Operators.",
      cover: "https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg",
      paragraphs: [
        "We can use conditions and loop with implicit returns inside collection literals",
        "It does not look extraordinary on first sight as we could simply add collection items inside if or for statement",
        "This is going to give a great convenience in building UIs in which there are collection widget that ask for children widgets",
        "Tips: This is amazing feature once you start using it you learn the full benifit of it"
      ],
      author: null),
  NewsModel(
      headline: "Flutter Supports Collection if and Collection for Operators.",
      cover: null,
      paragraphs: [
        "We can use conditions and loop with implicit returns inside collection literals",
        "It does not look extraordinary on first sight as we could simply add collection items inside if or for statement",
        "This is going to give a great convenience in building UIs in which there are collection widget that ask for children widgets",
      ],
      author: "Laxman Bhattarai"),
];

              
            
!
999px

Console